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

코드 복사 코드는 다음과 같습니다. ; test > 🎜>&lt ;/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 이벤트뿐만 아니라 이벤트가 버블링되는 것을 방지합니다.