在我的计算机上,所描述的问题仅发生在Chrome和Opera中(而不是在IE或Firefox中)。 但我认为它与javascript相关,而不是任何特定的浏览器。
这是小提琴: http : //jsfiddle.net/JN37b/
HTML:
<ul> <li>one</li> <li>two</li> <li>three</li> </ul>JavaScript的:
$('ul').mouseout(function() { event.stopPropagation(); //this just for testing alert('out'); });还有一些css ..
它看起来像这样:
当您将鼠标(在Chrome或Opera中)悬停在红色块( <ul> )上时,将鼠标水平移动到较小的蓝色框( <li> )上,然后会出现警告框。 这意味着在<ul>元素上触发了mouseout事件。
问题:如何阻止<li>捕获鼠标,使它们对此事件透明,以便只有当鼠标完全离开<ul>区域时才会发生mouseout事件?
我试过event.stopPropagation(); 但它没用,因为它的工作方向相反。
On my computer, the described issue only happens in Chrome and Opera (and not in IE or Firefox). But I think it is related rather to javascript than to any specific browser.
Here is the fiddle: http://jsfiddle.net/JN37b/
html:
<ul> <li>one</li> <li>two</li> <li>three</li> </ul>javascript:
$('ul').mouseout(function() { event.stopPropagation(); //this just for testing alert('out'); });and some css..
It looks like this:
When you hover the mouse (in Chrome or Opera) over the red block (which is <ul>), and move the mouse horizontally over the smaller blue boxes (which are <li>), then the alert box appears. This means that the mouseout event was fired on the <ul> element.
Question: how to prevent the <li> from capturing the mouse, make them transparent for this event, so that the mouseout event only happens when the mouse completely leaves the <ul> area?
I tried event.stopPropagation(); but it is useless, because it works in the opposite direction.
最满意答案
通过使用mouseleave事件代替
$('ul').mouseleave(function() { alert('out'); });小提琴
By using the mouseleave event instead
$('ul').mouseleave(function() { alert('out'); });FIDDLE
更多推荐
发布评论