快捷搜索:

w88官方网站手机版jquery裁撤事件冒泡的二种办法

作者: w88官方网站手机版  发布:2019-08-17

正文实例为大家分享了js事件的传入,供大家仿照效法,具体内容如下

1、通过重临false来打消暗中同意的行事并拦截事件起泡。

特征表达和规律图:

<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   #box1{ 
    width: 300px; 
    height: 300px; 
    background-color: deepskyblue; 
   } 

   #box2{ 
    width: 200px; 
    height: 200px; 
    background-color: cadetblue; 
   } 

   #box3{ 
    width: 100px; 
    height: 100px; 
    background-color: chocolate; 
   } 

  </style> 

  <script type="text/javascript"> 

   function bind(obj , eventStr , callback){ 

    if(obj.addEventListener){ 
     //如果是正常浏览器 
     obj.addEventListener(eventStr , callback , false); 
    }else{ 
     //IE8 
     obj.attachEvent("on" eventStr , function(){ 
      callback.call(obj); 
     }); 
    } 
   } 

   window.onload = function(){ 

    /* 
     * 事件的传播 
     * - 关于事件的传播微软和网景公司有着不同的理解 
     * - 微软公司,认为事件应该是从后代元素向祖先元素传播,即从里向外传播,也就是我们所谓事件的冒泡 
     * - 网景公司,认为事件应该是从祖先元素向后代元素传播,即从外向里传播,这一阶段我们称为事件的捕获 
     * - W3C综合了两个公司的方案,将事件的传播分成了三个阶段 
     *  1.捕获阶段 
     *   - 事件从最外层的元素(document),向目标元素进行事件的捕获 
     *   - 此阶段默认不会触发事件 
     *  2.目标阶段 
     *   - 目标指的是触发事件的元素,捕获到目标元素则捕获阶段停止 
     *  3.冒泡阶段 
     *   - 事件从目标元素向祖先元素中冒泡,此时开始触发事件 
     *   - 默认事件都是在冒泡阶段执行的 
     * 
     * - 事件都是默认在冒泡阶段执行的,一般不需要在捕获阶段触发事件, 
     *  如果希望在捕获阶段执行事件,则需要将addEventListener()的第三个参数修改为true 
     * 
     * - IE8及以下的浏览器没有捕获阶段,也不能设置在捕获阶段触发事件 
     */ 

    //分别为三个div绑定单击响应函数 
    var box1 = document.getElementById("box1"); 
    var box2 = document.getElementById("box2"); 
    var box3 = document.getElementById("box3"); 

    bind(box1,"click",function(){ 
     alert(1); 
    }) 

    bind(box2,"click",function(){ 
     alert(2); 
    }) 

    bind(box3,"click",function(){ 
     alert(3); 
    }) 

   }; 


  </script> 
 </head> 
 <body> 

  <div id="box1"> 
   <div id="box2"> 
    <div id="box3"></div> 
   </div> 
  </div> 

 </body> 
</html> 

jQuery 代码:

w88官方网站手机版 1

如上就是本文的全部内容,希望对大家的求学抱有支持,也可望大家多多帮助脚本之家。

$("form").bind(

  "submit", 

  function() { 

    return false;

   }

);
  • 正规浏览器和Ie9 浏览器都协助事件的冒泡和破获,而IE8-浏览器只辅助冒泡
  • 行业内部和Ie9 浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不帮助cancelBubble属性(设置后不见效),但chrome、safari、opera、firefox都支持cancelBubble属性。
  • Ie8-用attach伊芙nt为dom成分增添三个事变,但无法不在事变名前丰裕on,此类事件只好在要素的冒泡阶段。
  • stopPropagatin()方法用于阻止事件的流传,假使设置在破获阶段,则目的和冒泡阶段不会被推行;
  • cancelBubble属性只好阻止冒泡阶段,对抓获和指标阶段的轩然大波不可能拦截
  • preventDefault()和window.event.returnValue用于标准浏览器和ie9 ,都得以阻止私下认可事件。ie8-能够用returnValue,preventDefault()。

您或许感兴趣的篇章:

  • Javascript 伊夫nt(事件)的不知去向与冒泡
  • JavaScript完成事件的暂停传播和作为阻碍方法躬体力行
  • JavaScript中选用stopPropagation函数结束事件传播例子
  • 堵住事件(撤除浏览器对事件的暗中认可行为并阻止其扩散)

2、通过应用 preventDefault() 方法只收回默许的一言一动。

示范代码(ie8-示例不提供)

jQuery 代码:

html代码

$("form").bind(

  "submit", 

  function(event){
    event.preventDefault();
  }

);
<body class="body" > 
 <div class="log"></div>
 <input type="text" id="inTxt" name="intxt" />
<div class="wrap">
 <div class="cont">
  <button type="button" class="button" id="btn">按钮</button>
  <select name="stopType" id="stopType">
    <option value="1">StopPropagation</option>
    <option value="2">cancelBubble</option>
  </select>
  <button type="button" class="button" id="btnReject">cont阻止捕获或冒泡</button>
 </div>
</div>
</body>

3、通过采纳 stopPropagation() 方法只阻止一个事件起泡。

层级关系:body->wrap->cont->button,能够对照上面包车型客车原理

jQuery 代码:

Js代码

$("form").bind(

  "submit", 

  function(event){
    event.stopPropagation();
  }

);
$(function(){
    var $log = $('.log'), 
      $wrap = $('.wrap'),
      $cont = $('.cont'),
      $btn = document.getElementById('btn'),
      $stopType = $('#stopType'),
      $body = $('body'),
      $inTxt = $('#inTxt'),
      $btnReject = $('#btnReject');
    var ePhase = ["","捕获","目标","冒泡"]
    var setBorderColor = function( $dom, color, time,event){
      $dom = $($dom);
      $log.html($log.html()   $dom.attr('class')   '['   ePhase[event.eventPhase]   ']'   '<br/>')
      var timeIndex = window.setTimeout(function(){   
      $dom.css({
        'borderColor': color,
        'borderWidth': '4px'
      });
      }, time);
    }  
    //捕获
    $body[0].addEventListener('click',function(event){ 
      $log.html($log.html()   "-------------------<br>");
      setBorderColor($body,'#0866ff ',0,event);
    },true);  
    $wrap[0].addEventListener('click',function(event){
      setBorderColor($wrap,'yellow',2000,event); 
    },true);
    $cont[0].addEventListener('click',function(event){
      event = event || window.event;
      if( $stopType.val() == '1' ){
        event.stopPropagation();
      }else{
        event.cancelBubble = true;
      }
      setBorderColor($cont,'green',1000,event);  
    },true); 
    $btn.addEventListener('click', function(event){ 
      setBorderColor($btn,'red',0,event);
    },true);
    $btnReject[0].addEventListener('click',function(event){ 
      setBorderColor($btnReject,'gray ',0,event);
    },true);
    //冒泡
    $body[0].addEventListener('click',function(event){
      setBorderColor($body,'#0866ff ',0,event);
    },false); 
    $wrap[0].addEventListener('click',function(event){
      setBorderColor($wrap,'yellow',2000,event); 
    },false); 
    $cont[0].addEventListener('click',function(event){
      setBorderColor($cont,'green',1000,event);  
    },false); 
    $btn.addEventListener('click', function(event){ 
      setBorderColor($btn,'red',0,event);
    },false);
    $btnReject[0].addEventListener('click',function(event){ 
      setBorderColor($btnReject,'gray ',0,event);
    },false);
    //阻止默认事件
    $inTxt.keypress(function(event){
      //event.preventDefault(); 
      window.event.returnValue = false;
      $body.append( String.fromCharCode( event.keyCode ));
    });
  });

(4)总结

  1. 兑现多个整机的event流的德姆o
  2. 在cont的捕获事件处有阻止事件传播的代码
  3. 堵住暗许事件只用于评释

1. 四个事变起泡对应触发的是上层的等同事件

效果图

特种:若是two设置成双击事件,那么在您单击two的时候就能够起泡触发one单击的平地风波

w88官方网站手机版 2

(双击包蕴单击)。

选拔场景

2. 假如在click事件中,在你要拍卖的风浪以前增加e.preventDefault();

  • 破获阶段的风云选取场景比较少,一般景观下都采纳在指标和冒泡阶段。
  • 脚下w3c的职业事件已大规模受帮助,如若不兼容ie8-浏览器能够舍弃一些兼容性代码。

那正是说就收回了作为(通俗明了:也就是做了个return操作),不施行之后的语句了。

以上便是本文的全体内容,希望本文的剧情对我们的读书或然干活能推动一定的救助,同一时间也希望多多帮忙脚本之家!

3. e.stopPropagation()只要在click事件中,就不会触发上层click事件。

您恐怕感兴趣的篇章:

  • jquery撤废事件冒泡的三种办法(推荐)
  • js怎么着裁撤事件冒泡
  • flex中event.preventDefault()方法打消事件的默许行为
  • 有关捕获用户何时点击window.onbeforeunload的吊销事件
  • JavaScript达成事件的中止传播和表现阻碍方法言传身教
  • JavaScript中央银行使stopPropagation函数甘休事件传播例子
  • 掣肘事件(撤废浏览器对事件的暗许行为并截留其传播)
  • JS传播事件、撤销事件默许行为、阻止事件传播详解
//如果提供了事件对象,则这是一个非IE浏览器

if ( e && e.stopPropagation )
  // 因此它支持W3C的stopPropagation()方法
  
e.stopPropagation();
else
  //否则,我们需要使用IE的方式来取消事件冒泡
  
window.event.cancelBubble = true;
return false;

以上那篇jquery撤除事件冒泡的三种办法(推荐)正是笔者分享给大家的全体内容了,希望能给我们一个参照他事他说加以考察,也希望咱们多多协助脚本之家。

你只怕感兴趣的文章:

  • js如何裁撤事件冒泡
  • flex中event.preventDefault()方法打消事件的默许行为
  • 有关捕获用户哪一天点击window.onbeforeunload的吊销事件
  • Javascript 伊夫nt(事件)的传遍与冒泡
  • JavaScript实现事件的间歇传播和展现阻碍方法事必躬亲
  • JavaScript中央银行使stopPropagation函数截止事件传播例子
  • 阻拦事件(撤废浏览器对事件的暗中认可行为并阻止其扩散)
  • JS传播事件、打消事件暗中同意行为、阻止事件传播详解

本文由www.w88985.com发布于w88官方网站手机版,转载请注明出处:w88官方网站手机版jquery裁撤事件冒泡的二种办法

关键词: www.w88985.c