HTML中div标签内部组件引起onmouseout事件调用的解决方法

发布时间:2020-06-06编辑:脚本学堂
一个div里套了很多ul和li标签,这个外层的div里放了一个onmouseout鼠标事件,测试期间发现,当鼠标移动到这个div内部的任意元素上时,外层div的onmouseout事件竟然也被触发了,搜了半天资料,整理出一方法分享给大家。

解决方案:将这个onmouseout事件触发的函数使用onmouseout调用并传入一个很短的时间,同时在这个div里加入一个onmouseover事件,在onmouseover时调用一个
clearTimeout函数将它remove掉,即可解决。
举例:
Html代码
 

复制代码 代码示例:
<div onmouseout="doSomethingDiv();" onmouseover="clearTime();">
//内部一大堆元素...
  <ul>
    <li>....</li>
  </ul>
</div>
<div onmouseout="doSomethingDiv();" onmouseover="clearTime();">
//内部一大堆元素...
  <ul>
    <li>....</li>
  </ul>
</div>

这种div内部元素也会触发外部onmouseout动作的情况,添加一个setTimeout和clearTimeout方法,就是在内部触发onmouseout事件之前便将它clear掉:
Js代码
 

复制代码 代码示例:

var t;
//在这里调用setTimeout方法让它在一段很短的时间后执行
function doSomethingDiv(){
   t = setTimeout('doSomeFunc()',400);
}

//将setTimeout事件remove掉
function clearTime(){
   clearTimeout(t);
}
var t;
//在这里调用setTimeout方法让它在一段很短的时间后执行
function doSomethingDiv(){
   t = setTimeout('doSomeFunc()',400);
}

//将setTimeout事件remove掉
function clearTime(){
   clearTimeout(t);
}
 

效果不错。