Javascript Mouseover從孩子們冒泡

Question

我有以下html設置：

<div id="div1">
<div id="content1">blaat</div>
<div id="content1">blaat2</div>
</div>

它的風格，所以你不能懸停div1而不懸停其他2個div之一。 現在我在div1上有一個mouseout。
問題是當我從content1移動到content2時，我的div1.mouseout被觸發，因為它們的mouseout正在冒泡。
並且事件的target，currentTarget或relatedTarget屬性永遠不會是div1，因為它永遠不會直接懸停...
我一直在為此瘋狂尋找，但我只能找到與我所需要的相反的問題的文章和解決方案。 這似乎微不足道，但我無法讓它工作......
當鼠標離開div1時，只能觸發div1的mouseout。

其中一種可能性是設置一些關於鼠標輸入和鼠標輸入的數據，但我確信這應該是開箱即用的，因為它只是一個鼠標輸出...

編輯：

bar.mouseleave(function(e) {
                if ($(e.currentTarget).attr('id') == bar.attr('id')) {
                    bar.css('top', '-'+contentOuterHeight+'px');
                    $('#floatable-bar #floatable-bar-tabs span').removeClass('active');
                }
            });

將mouseout更改為mouseleave並且代碼工作正常...

Answer 1

請改用mouseleave事件或mouseout ，它會處理您的特定問題。 詳情請見此處

從關於差異的文檔：

mouseleave事件與mouseout處理事件冒泡的方式不同。 如果在此示例中使用了mouseout，那么當鼠標指針移出Inner元素時，將觸發處理程序。 這通常是不受歡迎的行為。 另一方面，mouseleave事件僅在鼠標離開它所綁定的元素時觸發其處理程序，而不是后代。 因此，在此示例中，處理程序在鼠標離開Outer元素時觸發，而不是Inner元素。

示例標記：

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>

Answer 2

hover方法有兩個參數，第一個用於鼠標輸入，第二個用於鼠標輸出。

$('your_div').hover(function(){
  // your code here.
}, function(){// any mouse out code here})