동일한 type_jquery의 이벤트를 방지하는 jQuery 요약

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

;

🎜>< ;/html>


위 HTML에서 빨간색 요소는 녹색 요소의 상위 요소입니다.



코드 복사

코드는 다음과 같습니다. $(function(){ $(" #green").click(function(event){ alert("green click1");

})

$("#green").click(function(event){
Alert("녹색 클릭2");
});
$("#red").click(function(event){
alert("빨간색 클릭");
} );
});


위의 js 코드는 빨간색 요소와 녹색 요소에 세 개의 클릭 이벤트를 추가합니다.
하위 요소인 green 요소를 클릭하면 green click1, green click2, red click 이벤트가 순차적으로 실행됩니다.
이벤트 추가: 녹색 요소를 클릭하면 녹색 click1과 녹색 click2(동일 요소에 대한 동일한 유형의 이벤트) 두 가지 이벤트가 순차적으로 실행됩니다.
이벤트 버블링: 녹색 요소를 클릭하면 상위 요소의 빨간색 클릭 이벤트가 트리거됩니다(상위 요소와 동일한 유형의 이벤트).

1. 하위 요소 이벤트 함수에서 이벤트 버블링 방지
방법 1: event.stopPropagation()




코드 복사

코드는 다음과 같습니다. $(function(){ $("#green").click(function(event){ event.stopPropagation();

Alert("녹색 클릭");

});
$("#red").click(function(event){
alert("빨간색 클릭");
}) ;
});


방법 2: false 반환

코드 복사

다음과 같습니다: $(function(){ $("#green").click(function(event){ alert("green click");

return false;

});
$("#red").click(function(event){
alert("red click");
});


위 두 가지 방법을 통해 하위 요소의 녹색 영역을 클릭한 후 빨간색 클릭 이벤트가 차단되어 더 이상 실행되지 않습니다. 그러나 빨간색 요소의 다른 영역을 클릭하는 데에는 영향을 미치지 않습니다.
둘 사이의 차이점:
false 반환은 event.preventDefault() event.stopPropagation()과 동일합니다.
2. 상위 요소 이벤트 함수에서 이벤트 버블링 방지

코드 복사

코드는 다음과 같습니다. $(function(){ $("#green").click(function(event){ alert("green click"); });

$(" #red").click(function(event){

if(event.target == this)
{
alert("red click");
}
} );
});


클릭한 대상 요소가 빨간색 요소 자체가 아닌 하위 요소인지 확인하려면 if(event.target== this)를 사용하세요. element green 요소, then no if 내부의 코드가 실행됩니다.
3. 이벤트 추가 방지
위 방법은 이벤트 버블링(즉, 상위 요소의 동일한 유형 이벤트)만 방지할 수 있지만 이벤트 추가(동일 요소의 동일한 유형 이벤트)는 방지할 수 없습니다. .

코드 복사

코드는 다음과 같습니다. $(function(){ $(" #green").click(function(event){ event.stopImmediatePropagation(); alert("green click");

})

$("#green" ).click (function(){
alert("green click2");
});
})


event.stopImmediatePropagation()은 녹색 click2 이벤트뿐만 아니라 이벤트가 버블링되는 것을 방지합니다.