Javascript - 使用鼠標事件和浮動元素的問題

我用jQuery編寫的腳本有一個棘手的問題。Javascript - 使用鼠標事件和浮動元素的問題

我有一個表，如果鼠標懸停在上面（標題行除外），將有一個工具欄出現在任何行上。這很好，這是它的代碼：

$cont.delegate('tr:not(:eq(0))','mouseover mouseout', function(e){ 
    var $this = $(this); 
    var pos = $this.position(); 
    if(e.type == 'mouseout') { 
     $actionToolbar.hide(); 
    } else { 
     $actionToolbar.css({ 
      'top' : pos.top + $this.height()/2 - $actionToolbar.height()/2, 
      'left' : pos.left + $this.width() - $actionToolbar.width() 
     }).show(); 
    } 
});

當我將鼠標懸停在操作工具欄上時，出現問題。該行的mouseout事件觸發，並隱藏工具欄（然後進入無限循環顯示/隱藏）。這是因爲工具欄是絕對定位的，而不是該行的孩子。

這裏的交易：

我不希望它是該行的孩子，因爲這意味着我不得不刪除，並追加到DOM對於每個鼠標的事件 - 這不如簡單地更新元素的CSS那樣有效。
我也想避免定時器解決這個如果可能的話。

在此先感謝！

來源

2011-04-25 typeof

有一點耐心，我已經走了，我發現我自己的答案：

我已經刪除了mouseout事件偵聽器和移動使用jQuery的data()方法來跟蹤先前徘徊一行。然後，我將一個mouseleave事件偵聽器添加到容器。

它完美：

$cont.delegate('tr:not(:eq(0))', 'mouseover', function(e) { 
    var $this = $(this); 
    $($cont.data('COLStorage.row')).removeClass(opts.hoverClass); 
    $this.addClass(opts.hoverClass); 
    var pos = $this.position(); 
    $actionToolbar.css({ 
     'top': pos.top + $this.height()/2 - $actionToolbar.height()/2, 
     'left': pos.left + $this.width() - $actionToolbar.width() 
    }).show(); 
    $cont.data('COLStorage.row', $this); 
}).mouseleave(function(e) { 
    $actionToolbar.fadeOut(); 
});

來源

2011-04-26 19:05:54 typeof

嘗試mouseenter和mouseleave而不是mouseover和mouseout。

來源

2011-04-25 19:33:12 ChrisThompson

'mouseenter'和'mouseleave'不與事件委託的工作。無論如何，它不會解決問題，因爲工具欄不是該行的子元素。 – typeof 2011-04-25 20:08:42

把一個標記CSS選擇器放在你的動作工具欄上，並使用jquery進行檢查。那麼如果你的事件的目標有標記選擇器，則不要應用。

來源

2011-04-25 19:38:13 JSager

你能詳細說一下嗎？一些代碼會有所幫助。 – typeof 2011-04-25 21:09:06

Javascript - 使用鼠標事件和浮動元素的問題

回答

相關問題