与event.stopPropagation（）和onClick（jQuery）相关的问题

我几年前编写了这段代码，当时它在Chrome中运行，但现在它在Chrome中导致无限循环。与event.stopPropagation（）和onClick（jQuery）相关的问题

<script> 
    function clickChildLink(el, event) { 
     console.log('inside function'); 
     var evtTarget = $(event.target); 
     if (evtTarget.is('a')) { 
      console.log('returning'); 
      return; //ignore clicks if its a link 
     } 
     $(el).children('a').click(); 
} 
</script> 

<div onclick="clickChildLink(this, event);"> 
    <a href="#" onclick="console.log('before'); event.stopPropagation(); console.log('after'); return false;">Header</a> 
</div>

您可以运行此代码：http://jsfiddle.net/Py7Mu/205/

基本上，它应该做的，就是如果股利（即标题）里面的用户点击，它发现其中的链接，并调用点击它。在Chrome上，这个被调用的点击也会传播回父级，这又会启动整个过程。

我知道我应该使用较少突兀的JavaScript，但这源于旧的rails应用程序（升级将有望很快到来）。

任何想法为什么事件不会实际停止传播？从技术上讲，代码应该在没有stopPropagation调用的情况下工作，因为函数中的if语句应该会阻止后续调用的触发。显然，当编程调用点击

来源

2011-12-21 gmoniey

这些代码让我头昏眼花。 – 2011-12-21 06:51:11

嗯，有一件事我可以看到：当Chrome认为它属于'div'时，Firefox将事件视为属于'a'元素。 – 2011-12-21 07:13:38

下面是在控制台中显示'event'的相同代码;我也停止循环以保存理智';）'。 http://jsfiddle.net/Py7Mu/213/ – 2011-12-21 07:18:10

如果只有一个孩子锚你能不能只是做类似Chrome不更新currentTarget当前...

$(el).click(function(){ 
    if (this.tagName !== 'A') 
     this.getElementsByTagName('A')[0].click(); 
});

或者我想，如果它的嵌套进一步下跌。 ..

$(el).click(function(){ 
    if (this.tagName !== 'A') 
     $('a', this)[0].click(); 
});

来源

2011-12-21 11:14:43

谢谢......这最后工作......奇怪的是，事件中的currentTarget使用此方法正确更新。 – gmoniey 2011-12-21 21:27:52

看起来像是由事件处理程序以内联的方式引起的。如果您使用jQuery onDomReady附加它们，它应该可以工作，并且更好，跨浏览器（您的当前脚本在IE < 9中不起作用）。另外，如果可以正确停止传播，则不需要在事件处理函数内部进行锚检查。

试试这个：

$(function(){ 

    $(div).click(function(){ 
     $(this).children('a').click(); 
    }); 

    $(a).click(function(e){ 
     e.stopPropagation(); 
    }); 

});

来源

2011-12-21 14:38:44 bfavaretto

与event.stopPropagation（）和onClick（jQuery）相关的问题

回答

相关问题