如何禁用子元素觸發的mouseout事件？

讓我詳細描述問題：如何禁用子元素觸發的mouseout事件？

我想顯示一個絕對定位的div時，懸停在一個元素上。 jQuery非常簡單，工作得很好。但是當鼠標移過其中一個子元素時，它會觸發包含div的mouseout事件。當鼠標懸停子元素時，如何保持javascript不觸發包含元素的mouseout事件。

什麼是最好的和最短的方式來做到這一點與jQuery？

下面是一個簡單的例子來說明我的意思：

HTML：

<a>Hover Me</a> 
<div> 
    <input>Test</input> 
    <select> 
    <option>Option 1</option> 
    <option>Option 2</option> 
    </select> 
</div>

的Javascript/jQuery的：

$('a').hover(function() { $(this).next().show() } 
       function() { $(this).next().hide() });

來源

2008-12-08 Sander Versluys

[沒有jQuery版本]（http://stackoverflow.com/q/4697758/2065702） – 2016-02-09 20:49:18

195

這個問題有點老了，但我前幾天碰到了這個問題。

最近版本的jQuery最簡單的方法是使用mouseenter和mouseleave事件，而不是mouseover和mouseout。

您可以快速測試的行爲：

$(".myClass").on({ 
    'mouseenter':function() { console.log("enter"); }, 
    'mouseleave':function() { console.log("leave"); } 
});

來源

2009-07-24 17:04:29 bytebrite

爲了簡單起見，我只想重新組織的HTML一將新顯示的內容放入鼠標懸停事件綁定的元素中：

<div id="hoverable"> 
    <a>Hover Me</a> 
    <div style="display:none;"> 
    <input>Test</input> 
    <select> 
     <option>Option 1</option> 
     <option>Option 2</option> 
    </select> 
    </div> 
</div>

然後，你可以做這樣的事情：

$('#hoverable').hover(function() { $(this).find("div").show(); }, 
         function() { $(this).find("div").hide(); });

注：我不建議內聯CSS，但它做的目的是使示例更容易消化。

來源

2008-12-08 20:16:59

T他的確是一個非常簡單和乾淨的解決方案。謝謝你提醒我。但在我的具體情況中，這與問題不完全相同，這是一種選擇。雖然謝謝！ – 2008-12-08 20:51:21

在嘗試了其他人在這裏介紹的不同方法後，我回到了你的方法，並使其適用於我的情況。好極了！ :-) – 2008-12-09 17:13:48

我通常看到的處理方式是在從HoverMe元素移動鼠標之間延遲約1/2秒。將鼠標移動到懸停元素中時，您需要設置一些變量，表示您將元素懸停在該元素上，然後基本上停止隱藏部分，如果設置了此變量。然後，您必須從懸停元素中添加類似的隱藏功能OnMouseOut，以便在您移除鼠標時使其消失。對不起，我不能給你任何代碼，或更具體的東西，但我希望這指出你在正確的方向。

來源

2008-12-08 20:25:51 Kibbee

是的IDD我剛剛實施了這樣的解決方案。這是一個非常普遍的問題。我真的很好奇，有什麼其他的解決方案...謝謝你的回答！ – 2008-12-08 20:45:07

我只是檢查鼠標座標是否在mouseout事件的元素之外。

它的工作原理，但它的很多的代碼，這麼簡單的事:(

function mouseOut(e) 
{ 
    var pos = GetMousePositionInElement(e, element); 
    if (pos.x < 0 || pos.x >= element.size.X || pos.y < 0 || pos.y >= element.size.Y) 
    { 
     RealMouseOut(); 
    } 
    else 
    { 
     //Hit a child-element 
    } 
}

代碼上剪下來的可讀性，將不工作的開箱。

來源

2008-12-08 20:28:25

嗯我也想過這個。這感覺有點骯髒......但它非常直截了當。 – 2008-12-08 20:47:29

您正在尋找的jQuery JavaScript的等效防止事件冒泡

檢查了這一點：

http://docs.jquery.com/Events/jQuery.Event#event.stopPropagation.28.29

基本上你需要捕獲子節點DOM節點中的事件，並在那裏阻止它們在DOM樹上的傳播。另一種方式，雖然沒有建議（因爲它可以嚴重混淆網頁上的現有事件），但是將事件捕獲設置爲頁面上的特定元素，並且它將接收所有事件。這對於DnD行爲等非常有用，但絕對不適合您的情況。

來源

2008-12-08 20:30:03

我一直都知道這應該是乾淨的方式來做到這一點，但我無法得到它的工作。將研究文檔更好。謝謝！ – 2008-12-08 20:49:05

這是因爲它應該，不知道爲什麼你不能得到它的工作..只是一個信息，文檔的鏈接已經改變，新的鏈接是http://docs.jquery.com/Events/jQuery.Event ＃event.stopPropagation.28.29 – zappan 2009-03-02 11:02:18

我同意瑞恩。

您的問題是「下一個」div不是A的「子」。HTML或jQuery無法知道您的「a」元素與DOM中的子div相關。將它們包裝起來並在包裝上懸停意味着它們相關聯。

請注意，他的代碼與最佳實踐不符。不要在元素上內嵌隱藏的樣式;如果用戶具有CSS但不包含JavaScript，則元素將隱藏並且將無法顯示。更好的做法是將該聲明放入document.ready事件中。

來源

2008-12-08 21:08:02 user37731

這是一個老問題，但它永遠不會過時。正確的答案應該是bytebrite給出的答案。

我只想指出mouseover/mouseout和mouseenter/mouseleave之間的區別。你可以閱讀一個很好的有用的解釋here（進入工作演示頁面的最底部）。當您使用mouseout時，當鼠標進入另一個元素時，即使它是一個子元素，事件也會停止。另一方面，當您使用mouseleave時，鼠標懸停子元素時不會觸發事件，這是OP想要實現的行爲。

來源

2013-04-02 13:44:00

葉氏，夥計們，用.mouseleave代替.mouseout：

$('div.sort-selector').mouseleave(function() { 
    $(this).hide(); 
});

甚至結合live使用它：

$('div.sort-selector').live('mouseleave', function() { 
    $(this).hide(); 
});

來源

2015-09-18 10:21:58

我加入我的子元素pointer-events: none; CSS

解決了這個問題

來源

2017-11-15 16:46:44 Antoine

如何禁用子元素觸發的mouseout事件？

回答

相關問題