Jquery가 이벤트 버블링을 중지합니다. event.stopPropagation_jquery

설명: 이벤트가 DOM 트리에서 버블링되는 것을 방지합니다. 즉, 이전 요소의 이벤트 핸들러가 트리거되지 않습니다.

버전 추가: 1.0
event.stopPropagation()
event.isPropagationStopped()를 사용하여 해당 이벤트 객체에서 이 메서드가 호출되었는지 확인할 수 있습니다.

이 방법은 Trigger()에 의해 트리거된 맞춤 이벤트에도 유효합니다.

동일한 요소의 다른 이벤트 핸들러가 실행되는 것을 막지는 않습니다.

추가 참고 사항:
.live() 메서드는 이벤트가 문서 상단으로 전파되면 이벤트를 처리하므로 라이브 이벤트 전파를 중지하는 것은 불가능합니다. 마찬가지로, .delegate() 이벤트는 항상 포함된 위임된 요소로 전파됩니다. 위임된 이벤트가 호출되면 해당 요소의 이벤트가 실행됩니다.
예:
클릭 이벤트 버블링을 중지합니다.

코드 복사 코드는 다음과 같습니다.

$("p").click( function(event ){
event.stopPropagation();
// 뭔가를 하세요
})

어렵지 않습니다. 중요한 것은 기록하는 것입니다. 예방 이벤트 버블.

div에 클릭 이벤트가 추가되었고 div 내부의 img도 클릭 이벤트가 추가되었기 때문에 img를 클릭하면 img에 대한 클릭 이벤트가 먼저 트리거된 다음 클릭이 발생합니다. div의 이벤트가 트리거됩니다. 이것이 이벤트 버블링입니다.

Jquery를 사용하면 쉽게 막을 수 있습니다.

다음과 같습니다

코드를 복사합니다 코드는 다음과 같습니다

event.stopPropagation() ;

이런 식으로 img를 클릭해도 더 이상 div의 클릭 이벤트가 트리거되지 않습니다

코드 복사 코드는 다음과 같습니다:

$('div').click(function(){
var $div = $(this);
if($div.find(' img').size() > 0){
return;
}else{
$div.css('BackgroundColor','#e1f0f3');
$('')
appendTo($(this)).click(함수 (이벤트){
$div .css('BackgroundColor','#ffffff');
$(this).remove()
event.stopPropagation()
}); ('여백-왼쪽','10px')
}
});