停止事件冒泡在各浏览器中已经有相应的解决方案,但是对于mouseover和mouseout却显得力不从心。
在IE里有onmouseleave和onmouseenter, 而对于要兼容各大浏览器的Web开发人员来说还是一件头疼的事。
虽然网上已经有针对Mozilla Firefox的一些计策,但代码量也是不容乐观的。
想寻求比较好的解决方案,于是就翻遍了国内的大小网站,终一无所获,不得不硬着头皮去读国外网站,结果是理想的,因为W3C里有relatedTarget,于是就有了下边的解决方案:
- function isMouseLeaveOrEnter(e, handler) {
- if (e.type != 'mouseout' && e.type != 'mouseover') return false;
- var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
- while (reltg && reltg != handler)
- reltg = reltg.parentNode;
- return (reltg != handler);
- }
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
在onmouseover和onmouseout里做如上判断。
先在IE中执行如下代码
- <div style="border: 1px solid black; width: 350px;" onmouseout="var out = document.getElementById('out'); out.value = parseInt(out.value) + 1;" onmouseover="var over = document.getElementById('over'); over.value = parseInt(over.value) + 1;">
- Try moving the mouse in and out of this div
- <div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
- </div>
- <p>
- mouseovers <input id="over" value="0">
- mouseouts <input id="out" value="0"><br>
- </p>
-
- <div style="border: 1px solid black; width: 350px;" onmouseleave="var leave = document.getElementById('leave'); leave.value = parseInt(leave.value) + 1;" onmouseenter="var enter = document.getElementById('enter'); enter.value = parseInt(enter.value) + 1;">
- Try moving the mouse in and out of this div
- <div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
- </div>
- <p>
- mouseenters <input id="enter" value="0">
- mouseleaves <input id="leave" value="0"><br>
- </p>
<div style="border: 1px solid black; width: 350px;" onmouseout="var out = document.getElementById('out'); out.value = parseInt(out.value) + 1;" onmouseover="var over = document.getElementById('over'); over.value = parseInt(over.value) + 1;">
Try moving the mouse in and out of this div
<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
mouseovers <input id="over" value="0">
mouseouts <input id="out" value="0"><br>
</p>
<div style="border: 1px solid black; width: 350px;" onmouseleave="var leave = document.getElementById('leave'); leave.value = parseInt(leave.value) + 1;" onmouseenter="var enter = document.getElementById('enter'); enter.value = parseInt(enter.value) + 1;">
Try moving the mouse in and out of this div
<div style="background: #efe; margin: 20px; width: 160px; border: 5px solid black;">and the nested div</div>
</div>
<p>
mouseenters <input id="enter" value="0">
mouseleaves <input id="leave" value="0"><br>
</p>
看到效果后理解onmouseover,onmouseout,onmouseenter,onmouseleave,以及为什么要寻求以上解决之道
然后再加入如下script:
- function isMouseLeaveOrEnter(e, handler) {
- if (e.type != 'mouseout' && e.type != 'mouseover') return false;
- var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
- while (reltg && reltg != handler)
- reltg = reltg.parentNode;
- return (reltg != handler);
- }
function isMouseLeaveOrEnter(e, handler) {
if (e.type != 'mouseout' && e.type != 'mouseover') return false;
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
while (reltg && reltg != handler)
reltg = reltg.parentNode;
return (reltg != handler);
}
将onmouseenter和onmouseleave部分换成
- onmouseout="var leave = document.getElementById('leave'); if (isMouseLeaveOrEnter(event, this)) leave.value = parseInt(leave.value) + 1;" onmouseover="var enter = document.getElementById('enter'); if (isMouseLeaveOrEnter(event, this)) enter.value = parseInt(enter.value) + 1;"
onmouseout="var leave = document.getElementById('leave'); if (isMouseLeaveOrEnter(event, this)) leave.value = parseInt(leave.value) + 1;" onmouseover="var enter = document.getElementById('enter'); if (isMouseLeaveOrEnter(event, this)) enter.value = parseInt(enter.value) + 1;"
在IE及Firefox里执行
|