当鼠标在跨度内时 Mouseleave 触发答案

【问题标题】：Mouseleave fires when mouse is inside span当鼠标在跨度内时 Mouseleave 触发
【发布时间】：2013-11-12 21:43:18
【问题描述】：

我正在制作这个插件

HTML

<span class="item" data-item="first">
</span>
  <br><br>
<span class="item" data-item="second">
</span>
<br><br>
<span class="item" data-item="third">

jQuery

(function($){
  $.fn.myPlugin = function(){
     $(this).on('mouseleave', function(){  
          var item = $(this).attr('data-item');
          alert(item);           
      });    

    return this.each(function() {    
      for (var i = 1; i <= 2; i++) {
        $(this).append('<span class="act" title="active '+i+'">act'+i+'</span>');
      }   
    });
  };
})(jQuery);



$(document).ready(function() {
  $('.item').myPlugin();
});

问题是当我将鼠标悬停在两个动态创建的元素之间时，即使我在项目类中，mouseleave 也会触发。演示http://jsbin.com/IWutoQa/9/

尝试在act1和act2之间移动鼠标

【问题讨论】：

api.jquery.com/event.stopPropagation ?
@mplungjan 在 stopPropagation 后仍然触发

标签： jquery jquery-plugins

【解决方案1】：

这是因为margin-left: 10px!请改用padding-left: 10px，它会正常工作。

示例：jsfiddle

【讨论】：

它在 tnx 上有效。但我想知道当我在 span 内时事件正在触发
@Ace 你不在跨度内了！边距在实际元素外部产生间隙；填充内部。看看margin example。它使用边距（像你的一样）但有边框。因此，您可以看到跨度之间存在间隙（--> 触发了 mouseleve 事件）。如果您将它与padding example （就像我的解决方案一样）进行比较，您会发现跨度之间不再存在间隙（--> 不会触发mouseleve 事件）