event.stopPropagation() 및 onClick (jQuery)에 문제가 발생했습니다.

Question

몇 년 전이 코드를 작성했으며 그 당시에는 FF & 크롬에서 작동하지만 이제는 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/

기본적으로, 무엇을 자사하고 가정 사업부 (즉, 헤더) 내부 사용자가 클릭, 그것은 그 안에 링크를 발견하고,를 호출하는 경우입니다 그것을 클릭하십시오. Chrome에서 호출 된 클릭은 상위 프로세스로 다시 전달되어 전체 프로세스를 다시 시작합니다.

나는 덜 눈에 거슬리는 자바 스크립트를 사용해야한다는 것을 알고 있지만 이것은 오래된 레일 앱에서 유래합니다 (업그레이드는 곧 출시 될 예정입니다).

이벤트가 실제로 전파되지 않는 이유는 무엇입니까? 기술적으로 코드는 stopPropagation 호출없이 작동해야합니다. 함수 내부의 if 문은 이후 호출이 실행되지 않도록해야하기 때문입니다. 분명히, 당신은 그냥 뭔가를 할 수없는 단 하나의 자식 앵커가있는 경우 프로그래밍 방식으로 클릭을

Answer 1

를 호출 할 때 크롬은 ...

$(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(); 
    }); 

});