Question

我有如下所示的链接

<a item='1' href='javascript:void(0)'><img class='icon1' /><span>text1</span></a>
<a item='1' href='javascript:void(0)'><img class='icon2' /><span>text2</span></a>
<a item='1' href='javascript:void(0)'><img class='icon3' /><span>text3</span></a>
<a item='1' href='javascript:void(0)'><img class='icon4' /><span>text4</span></a>


$(function(){
$('a').click(_handleClick);
});

function _handleClick(e)
{
var _item=$(e.target).attr('item');
// do something with _item variable
}

//现在我的问题是，当用户点击_handleClick中收到的图像'e'是图像，所以我无法读取attr ='item'，所以如何使事件冒泡以读取该值。

Answer 1

由于附加了事件处理程序的'a'元素，您根本不需要对事件冒泡进行任何处理，也存储'item'属性。在这种情况下，你只需使用'this'来引用带有click事件的项目，$（this）.attr（'item'）将检索'item'的值。

这一行：

var _item=$(e.target).attr('item');

应该是：

var _item=$(this).attr('item');

编辑：澄清了第一句话，并添加了以下信息：

为了澄清，事件冒泡在jQuery中是自动的。如果单击元素的子元素，事件将一直冒泡到顶部，随后触发事件。

有些时候你需要用event.stopPropagation()停止射击。

还有其他时候它会派上用场。例如，考虑一个有100个孩子的'div'，所有孩子都应该收到相同的点击事件。您可以只将1个点击事件分配给父项，而不是消耗为这100个孩子维护事件处理程序所需的所有资源，然后使用event.target来确定实际点击了哪个。

这种方法的另一个好处是，在向父级动态添加其他子级时，您不必使用live（）。因为他们都因为冒泡而点燃了父母的点击事件，所以他们准备好了。

Answer 2

尝试此操作，而不是直接执行点击目标：

$(function(){
  $('a').click(function() {
    var _item = $(this).attr('item');
    // do something with _item variable        
  });
});

虽然click事件是针对所有父元素触发的，但e.target仍然是点击的来源，您点击的原始最深的孩子... jQuery与$(this)处理它，无需担心下面哪个子元素触发它。

Answer 3

var _item=$(e.target).parents('a').attr('item');

在jquery中处理事件冒泡

3 个答案: