问题描述
- JS关于mouseout事件在父亲元素与子元素之间的小问题,求解了 ,谢谢
-
我又来了,想把问题搞明白不想不求甚解<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin:0; padding:0; list-style-type:none;} nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;} #A li{width:40px; height:40px; float:left; padding-left:20px;} #B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;} </style> </head> <body> <nav onmouseout="xi()"> <ul id="A"> <li onmouseover="show(0)">首页1</li> <li onmouseover="show(1)">男装2</li> <li onmouseover="show(2)">女装3</li> <li onmouseover="show(3)">热卖4</li> </ul> <ul id="B" onmouseout="show2()" onmouseover="show3()"> <li>商品1</li> <li>商品2</li> <li>商品3</li> <li>商品4</li> </ul> </nav> </body> <script> var a=document.getElementById('A').getElementsByTagName('li'); var b=document.getElementById('B').getElementsByTagName('li'); function show(m){ b[m].style.display='block'; b[m].style.left=a[m].offsetLeft+'px'; } function xi(){ for(var i=0;i< b.length;i++){ b[i].style.display='none'; } } window.setTimeout('xi()',1000); function show2(){ for(var i=0;i< b.length;i++){ b[i].style.display='none'; } } </script> </html>我认为鼠标离开B, B才会消失, 因为B是nav里的元素啊
但是事实是鼠标一离开nav B就消失了
, 我看别人那么写的都可以啊 我的为什么不行了.... - -!好忧桑
(我也知道nav的height是40px),昨晚一位好心的网友给了我这个答案让我参考:
onmouseout事件过于敏感,所以通过setTimeout事件来延迟事件的执行就好了.someElement.onmouseout = function () { // ch在函数顶端已经var过了 ch = setTimeout("something", 100); };(if (ch) {
clearTimeout(ch);
}
至于这个判断要放在什么地方,具体情况具体分析,不过大部分都是放在onmouseover事件的顶部
)
我觉得思路很棒啊,但是不知道怎么用进去
someElement是什么意思啊?谢谢大家了
解决不了问题很苦恼啊 = =!
解决方案
*{margin:0; padding:0; list-style-type:none;}
nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
#A li{width:40px; height:40px; float:left; padding-left:20px;}
#B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
- 首页1
- 男装2
- 女装3
- 热卖4
- 商品1
- 商品2
- 商品3
- 商品4
var aALi=document.getElementById('A').getElementsByTagName('li');
var aBLi=document.getElementById('B').getElementsByTagName('li');
var timer = null;
function fnShowNav(m){
fnHideShop();
aBLi[m].style.display='block';
aBLi[m].style.left=aALi[m].offsetLeft+'px';
}
function fnHideShop(){
for(var i=0;i< aBLi.length;i++){
aBLi[i].style.display='none';
}
}
function fnOut(){
timer = setTimeout(fnHideShop,300);
}
function fnOver(){
clearTimeout(timer);
}
解决方案二：
http://www.cnblogs.com/zhrj000/archive/2012/10/11/2720353.html
解决方案三：
<!DOCTYPE html>
*{margin:0; padding:0; list-style-type:none;}
nav{height:40px; width:1000px; margin:auto; background:#ccc; position:relative; top:0; left:0;}
#A li{width:40px; height:40px; float:left; padding-left:20px;}
#B li{width:60px; height:40px; position:absolute; top:40px; left:0; background:green; display:none;}
- 首页1
- 男装2
- 女装3
- 热卖4
- 商品1
- 商品2
- 商品3
- 商品4
var aALi=document.getElementById('A').getElementsByTagName('li');
var aBLi=document.getElementById('B').getElementsByTagName('li');
var timer = null;
function fnShowNav(m){
fnHideShop();
aBLi[m].style.display='block';
aBLi[m].style.left=aALi[m].offsetLeft+'px';
}
function fnHideShop(){
for(var i=0;i< aBLi.length;i++){
aBLi[i].style.display='none';
}
}
function fnOut(){
timer = setTimeout(fnHideShop,300);
}
function fnOver(){
clearTimeout(timer);
}
下次写代码规范点，另外 不建议行间加事件
解决方案四：
看图片吧
解决方案五：
要么是事件区域选择问题出错了，要么就是mouseover和mouseout区别的问题
解决方案六：
js 中的元素和事件介绍
js 捕捉元素事件
JS给元素添加事件