Question

example fiddle

的JavaScript

$('#btn').on('mouseover', function() {
    $('#tt').show();
}).on('mouseleave', function() {
    $('#tt').hide();
}).on('click', function() {
    $(this).remove();
});

HTML

<button id="btn">press me</button>
<div id="tt">tooltip</div>

基本上，当光标仍在其上时删除元素时，永远不会触发mouseleave事件。我想这是有道理的，因为如果元素消失了，事件/绑定也就消失了。

但我们如何解决这个问题？

当然，我也可以在$('#tt').hide();事件中加入click，但我希望有一个更通用的解决方案。我的现实生活中的例子有点复杂，我并不总是知道该元素什么时候被删除。

没有ondestroy事件或我可以挂钩的任何内容，它会在删除之前触发，是否存在？

Answer 1

我使用jsFiddle中的代码更新了您的this solution。

(function($){
  $.event.special.destroyed = {
    remove: function(o) {
      if (o.handler) {
        o.handler()
      }
    }
  }
})(jQuery)

$('#btn').on('mouseover', function() {
  $('#tt').show();
}).on('mouseleave', function() {
  $('#tt').hide();
}).on('click', function() {
  $(this).remove();
}).on('destroyed', function() {
  $('#tt').hide();
})

或者，您可以绑定到DOMNodeRemoved突变事件，但W3 spec表示不推荐使用此事件类型due to performance and cross browser support issues。

$(document).bind('DOMNodeRemoved', function(e) {
  if(e.target.id=='btn') {
    $('#tt').hide();
  }
});

在较新的浏览器（Chrome 18 +，Firefox 14+）中，支持MutationObserver对象，该对象旨在替换突变事件。在你的情况下它可以这样工作：

var target = document.querySelector('body');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {  
    if(mutation.removedNodes[0]!=undefined) {
      if(mutation.removedNodes[0].id=='btn') {
        $('#tt').hide();              
      }
    }
  });    
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe(target, config);

这是关于Code Review的问题的link，其中有人正在编写DOM MutationObserver垫片，当MutationObserver对象不可用时，该垫片会依赖于突变事件。

删除元素时不会触发Mouseleave

example fiddle

1 个答案: