带通配符选择器/事件冒泡的嵌套元素

Question

我想绑定到一个元素并在它上面添加一个大纲。问题是，当我将鼠标悬停在嵌套元素上时，父元素也被选中。

当我将鼠标悬停在“5深度”上时，我应该只在该跨度上有一个边框，而不是所有的父母。

http://jsfiddle.net/7uQwr/

我怎样才能避免这种情况？一种奇怪的用例，但我没有控制这里的标记:)

Answer 1

这是因为event冒泡，直到body元素。使用event.stopPropagation()停止事件传播，那么它只会限制触发事件的元素。

工作demo

Answer 2

<span id="1"> 
one deep 
<span id="2"> 
    two deep 
    <span id="3"> 
     Three deep 
     <span id="4"> 
      Four Deep 
      <span id="5"> 
       five deep 
      </span> 
     </span> 
    </span> 

$('#5').hover(function() { 
    $(this).css('outline', '2px solid red'); 
    }, 
     function() { 
     $(this).css('outline', 'none') 
    }); 

Answer 3

我不能让这与hover工作。如果你从左到右混淆，反之亦然，它的行为并不像我想要的那样。相反，我做了这似乎很好的工作。

http://jsfiddle.net/7uQwr/6/

$('body *').mouseover(function(e) { 
    $(this).css('outline', '2px solid red'); 
    e.stopPropagation(); 
}); 

$('body *').mouseout(function(e) { 
    $('span').css('outline', 'none'); 
});