event.stopPropagation（）とonClick（jQuery）に関するトラブル

Question

私はこのコードを数年前に書いていましたが、当時はFF & 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要素（すなわちヘッダ）内のユーザーがクリックすると、それはその中にリンクを見つけ、呼び出した場合、ありますクリックして。 Chromeでは、クリックされた呼び出しも親プロセスに伝播し、プロセス全体が再び開始されます。

私はあまり目立たないjavascriptを使うべきだと知っていますが、これは古いレールアプリに由来します（アップグレードはうまくいけば間に合うでしょう）。

イベントが実際に伝播を停止しない理由は何ですか？技術的には、stopPropagation呼び出しを使わずにコードを動作させる必要があります。関数内のifステートメントは、後続の呼び出しを起動から停止する必要があるからです。どうやら、あなただけのような何かを行うことができなかっただけで一人の子供のアンカーがある場合、プログラムでクリックに

Answer 1

を呼び出すときにChromeが...

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

をは、currentTargetを更新していないか、それがさらに下にネストされていた場合、私は推測します。 ..

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

Answer 2

イベントハンドラがインラインで接続されているように見えます。 jQuery、onDomReadyを使用してそれらを添付すると、それはうまくいくはずです（ブラウザをクロスする方が良いでしょう）。現在のスクリプトはIE < 9で動作しません。また、伝播を適切に停止できる場合は、イベントハンドラー内でアンカーチェックを行う必要はありません。

はこれを試してみてください：

$(function(){ 

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

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

});