如下代码所示:
<div id="outerBox" style="border:1px solid red;width:300;height:300" onmouseout="alert('out')">
<div id="innerBox" style="border:1px solid blue;width:50;height:50">inner</div>
</div>
为什么当我在"innerBox"上移动鼠标时,它会触发alert('out')
?
我希望鼠标离开"outerBox"只触发alert('out')
,鼠标在"innerBox"上不触发警报。
如何做到这一点?
2条答案
按热度按时间u5rb5r591#
这是mouseout和mouseover事件的标准行为,InternetExplorer实际上在这方面领先于竞争对手(有所改变),因为它有专有的事件来提供你所寻找的行为;
onmouseenter
和onmouseleave
。主要的缺点是这些事件不是标准的一部分,其他浏览器也没有实现它们。如果你使用jQuery,它有一个很好的跨浏览器实现。无论如何,使用一个框架来处理跨浏览器事件是一个好主意。它不一定是jQuery,但我不确定其他的是否有
mouseleave
事件。如果您没有使用jQuery或提供模拟事件的框架,请参见http://ecmascript.stchur.com/2007/03/15/mouseenter-and-mouseleave-events-for-firefox-and-other-non-ie-browsers/
axr492tv2#
我在这里找到了你需要的功能:http://codingrecipes.com/onmouseout-fix-on-nested-elements-javascript