处理事件中的jquery

IAM具有链接bubling如下所示处理事件中的jquery

<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 
}

//现在我的问题是，当使图像的“e”在_handleClick接收用户点击被图像，所以我不能读ATTR ='项目'那么如何让事件冒泡读取该值。

来源

2010-02-06 Praveen Prasad

因为附加了事件处理程序的'a'元素也存储'item'属性，所以根本不需要对事件冒泡进行任何处理。在这种情况下，您只需使用'this'通过点击事件来引用该项目，$（this）.attr（'item'）将检索'item'的值。

这条线：

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

应该是：

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

编辑：澄清的第一个句子，并且增加了以下信息：

为了澄清，事件冒泡是自动在jQuery中。如果你点击一个元素的孩子，这个事件会一路冒泡到顶部，随着事件的发生而触发事件。

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

还有其他时间它派上用场。例如，考虑一个拥有100个孩子的'div'，所有这些孩子都应该接受相同的点击事件。您可以将一个单击事件分配给父级，然后使用event.target来确定实际单击的事件，而不是消耗它需要的所有资源来维护这100个子级的事件处理程序。

这种方法的另一个好处是，在动态添加额外的子项给父项时，您不必使用live（）。由于他们都因冒泡而触发父母的点击事件，因此他们准备好了。

来源

2010-02-06 12:36:26 user113716

但也有锚标记内的两个元素，而这些很可能是该事件的实际收件人。给出的其他答案看起来更接近父锚，尽管点击“戳穿”锚点并非不可能。 – Pointy 2010-02-06 12:58:51

@Pointy - 事件附加到'a'元素。不管实际的目标是什么，事件处理程序在'a'上被调用。导致这一点的是事件冒泡。我的答案的第一句话有点欺骗，所以我会调整它。 – user113716 2010-02-06 13:15:14

ah ok duhh;感谢您的澄清 – Pointy 2010-02-06 13:17:34

试试这个，而不是直接做点击目标：

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

虽然click事件上的所有父元素发射时，e.target仍是点击，你点击了原来最深孩子的来源。与$(this) ..jQuery处理，不需要担心下面哪个子元素激发它。

来源

2010-02-06 12:29:17

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

来源

2010-02-06 12:38:16 Leventix

这是一个更好的答案，尽管事件可能不会在锚标记上直接触发。我认为最好检查目标元素是否为锚点，如果不是，则使用“父母（'a'）”来查找它。 – Pointy 2010-02-06 13:00:41

不需要反思目标的父母，因为事件会自动冒泡到具有'item'属性的相同元素。 – user113716 2010-02-06 13:25:15

处理事件中的jquery

回答

相关问题