JavaScript에서 이벤트 버블링을 방지하는 두 가지 방법-JS 튜토리얼-php.cn

JavaScript에서 이벤트 버블링을 방지하는 두 가지 방법

yulia

풀어 주다： 2018-09-13 16:47:35

원래의

1677명이 탐색했습니다.

1. JS 이벤트 버블링이란 무엇입니까?

객체에서 특정 유형의 이벤트(예: onclick 이벤트)를 트리거하면 이 이벤트가 이 핸들러를 호출합니다. 이 이벤트 핸들러가 정의되지 않았거나 이벤트가 true를 반환하는 경우 이 이벤트는 처리될 때까지(부모 개체의 모든 유사한 이벤트가 활성화됨) 내부에서 외부로 이 개체의 부모 개체에 전파됩니다. 또는 그것은 문서 개체(일부 브라우저의 창)인 개체 계층의 최상위 수준에 도달했습니다.

2. 차단 방법

방법 1: event.stopPropagation()

<div>
    <p>段落文本内容
        <input type="button" value="点击" />
    </p>
</div>

로그인 후 복사

// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-click");
} );
//为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
} );
//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click （同类型的事件）  
} );

로그인 후 복사

방법 2: event.target

이제 이벤트 핸들러의 변수 event가 이벤트 개체를 보유합니다. event.target 속성은 이벤트가 발생한 대상 요소를 저장합니다. 이 속성은 DOM API에 지정되지만 모든 브라우저에서 구현되는 것은 아닙니다. jQuery는 이 속성을 모든 브라우저에서 사용할 수 있도록 이 이벤트 개체에 필요한 확장을 만듭니다. .target을 사용하면 이벤트를 처음 수신한 DOM 요소(예: 실제로 클릭된 요소)를 확인할 수 있습니다. 또한 이것이 이벤트를 처리하는 DOM 요소를 참조한다는 것을 알고 있으므로 다음 코드를 작성할 수 있습니다.

$(document).ready(function(){
 $(&#39;#switcher&#39;).click(function(event){
  $(&#39;#switcher .button&#39;).toggleClass(&#39;hidden&#39;);
  })
 })  
$(document).ready(function(){
 $(&#39;#switcher&#39;).click(function(event){
  if(event.target==this){//判断是否是当前绑定事件的元素元素触发的该事件
  $(&#39;#switcher .button&#39;).toggleClass(&#39;hidden&#39;);
  }
  })
 })

로그인 후 복사

이때의 코드는 클릭된 요소가

다른 하위 요소. 이제 버튼을 클릭해도 스타일 변환기가 더 이상 축소되지 않으며, 테두리를 클릭하면 축소 작업이 실행됩니다. 그러나 레이블을 클릭해도 하위 요소이기 때문에 아무 작업도 수행되지 않습니다. 실제로 여기에 확인 코드를 넣는 것이 아니라 버튼의 동작을 수정하면 목표를 달성할 수 있습니다.

위 내용은 JavaScript에서 이벤트 버블링을 방지하는 두 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!