집 > 기사 > 웹 프론트엔드 > js에서 이벤트 버블링을 방지하는 두 가지 방법

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

不言원래의: 2018-04-10 14:27:435446검색

이 글은 js에서 이벤트 버블링을 방지하는 두 가지 방법을 공유합니다. 도움이 필요한 친구들은 이를 참고할 수 있습니다.

1. 버블링 이벤트 소개

컨트롤을 클릭하면 이 컨트롤의 상위 컨트롤이 표시됩니다. 컨트롤에도 클릭 이벤트가 있으므로 실행이 계속됩니다.

방법 1: event.stopPropagation( );

예:

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

html 코드:

// 为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-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和p的clic；
                 } );

방법 2: event.target

现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的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;);
  }
  })
 })

此时的代码确保了被单击的元素是6e08cffd95166ffdf6670c2c330eceed ，而不是其他后代元素。现在，单击按钮不会再折叠样式转换器，而单击边框则会触发折叠操作。但是，单击标签同样什么也不会发生，因为它也是一个后代元素。实际上，我们可以不把检查代码放在这里，而是通过修改按钮的行为来达到目标。

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

관련 기사