如何防止内部html元素捕获javascript事件？(how to prevent inner html elements from capturing javascript events?)

如何防止内部html元素捕获javascript事件？(how to prevent inner html elements from capturing javascript events?)

在我的计算机上，所描述的问题仅发生在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