Question

几年前我写了这段代码，当时它在FF＆amp; Chrome，但现在，它会在Chrome中产生无限循环。

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

基本上，它应该做的是，如果用户在div（即Header）内部单击，它会在其中找到链接，并调用它上面的单击。在Chrome上，该调用的点击也会传播回父级，而父级又会再次启动整个过程。

我知道我应该使用不那么突兀的javascript，但这源于一个旧的rails应用程序（希望很快就会升级）。

知道为什么事件实际上没有停止传播？从技术上讲，代码应该在没有stopPropagation调用的情况下工作，因为函数内部的if语句应该停止后续调用。显然，Chrome在以编程方式调用点击

时不会更新currentTarget

Answer 1

如果只有一个儿童锚，你不能只做像...这样的事情。

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

或者我猜它是否进一步嵌套......

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

Answer 2

看起来它是由内联附加的事件处理程序引起的。如果你使用jQuery，onDomReady附加它们，它应该可以工作，更好的是，跨浏览器（你的当前脚本在IE＆lt; 9中不起作用）。此外，如果可以正确停止传播，则不需要在事件处理程序中进行锚点检查。

试试这个：

$(function(){

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

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

});

event.stopPropagation（）＆amp; onClick（jQuery）

2 个答案: