與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）相關的問題

回答

相關問題