jQuery에서 이벤트 버블 링

Question

jQuery에서 다음 이벤트 버블 링 상황을 어떻게 해결해야하는지 잘 모르겠습니다.

나는 클릭 이벤트가있는 목록 요소 (li) 안에 링크가 있습니다. 사용자가 링크 요소를 클릭하면 링크 이벤트 (클릭)를 호출하고 li에 대한 액션을 호출하는 li 요소에 액션을 추가하고 싶습니다. (리 또는 내부의 아무 것도 클릭 할 때 항상 클릭 이벤트를 트리거하려고합니다.).

어떻게해야합니까?

여기에 HTML 코드는 다음과 같습니다

<li> 
    <img src="images/img.png" /> 
    <a href="/remote/path" data-remote="true">Link</a> 
</li> 

및 jQuery 코드 (obviosly 작동하지 않을 것이다) :

$("li a").click(function(e) { 
    e.preventBubble = true; 
}); 

$("li").click(function() { 
    $el = $(this).find('a'); 
    $el.click(); 
    $(this).addClass('active'); 
}); 

이에 가장 우아한 해결책은 무엇인가?

도움 주셔서 감사합니다.

Answer 1

잘 이해했다면 직접 구현하는 대신 jQuery .stopPropagation()을 사용해야합니다.

event.stopPropagation는()

설명 : 이벤트 통지되는 모든 부모 핸들러를 방지 를 DOM 트리를 버블 링에서 이벤트를 방지합니다.

및 구현 :

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

Answer 2

이 event.stopPropagation() 또는

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

event.stopImmediatePropagation()를 사용해보십시오 보통 나는

더 나은이 반환 거짓으로 이동 return false; 또는 event.preventDefault()를 사용하여이 작업을 수행하는 데 사용;, 발생하는에서 기본 이벤트를 방지 할 이유 here

e.preventDefault()을 확인, e.stopPropagation() 최대 버블 링에서 이벤트를 방지하고 return false 둘 다 할 것입니다. 당신이 fidde에서

---

, li 및 a 2 개 기능을 가질 필요는 없습니다.

당신은 이미 li ==에게 a 보인다 다음은이

<ul id="some_list"> 
    <li> <a href="/remote-path" data-remote="true">Some link</a> 
    </li> 
</ul> 

처럼, 그래서 당신은 왜 2 개의 다른 기능을 원하는.

이렇게 시도해보고 이유를 알고 싶다면 JSFiddle을 확인하십시오.

<ul id="some_list"> 
    <li> 
     <a href="/remote-path" data-remote="true">Some link</a>Text apart from a 
    </li> 
</ul>