前端面试题2-js阻止事件冒泡

JS阻止事件冒泡

1. 定义：在一个对象上触发某类事件（例如单击onclick事件），如果此对象定义了事件的处理程序，那么此事件就会调用这个处理程序，反之或者事件返回ture，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象的所有同类事件都将被激活）

2. 两种阻止方法

   • event.stopPropaagation()

     <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 （同类型的事件）  
     } );
     

   • event.target

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

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

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