奥门巴黎人手机网址【app】

事件委托与阻碍冒泡阻止其父成分事件触发

2019-09-09 09:17·澳门巴黎人娱乐

简言之说下事件委托与拦截冒泡

正文实例陈诉了jQuery阻止事件冒泡。共享给大家供我们参考,具体如下:

本文实例呈报了zepto.js中tap事件阻止冒泡的兑现格局。分享给大家供大家参照他事他说加以考察。具体如下:

正文实例陈说了JavaScript捕捉事件和阻挠冒泡事件。分享给我们供大家参照他事他说加以考察,具体如下:

html:

大家在常常的支付进程中,肯定会遇上在三个div(那个div能够是因素)包裹三个div的事态,然而呢,在那多个div上都增添了事件,假设点击里面的div我们愿意管理那个div的平地风波,不过呢,大家不指望外层的div的事件也举行,那时候大家将要选拔阻止冒泡。

近年在弄三个手提式有线电话机版的网址,本来想用jQuery Mobile,但文件太大了,所以用了zepto.js

今天,项近来后相继出现非常,后意识跟冒泡事件有关,利用此机缘索求一下采纳Javascript捕获和冒泡事件。

<ul class="clearfix" data-type="cityPick"> 
<li class="active_sort_opts" data-id="0">全部</li> 
<li data-id="88">纽约</li> 
<li data-id="119">洛杉矶</li> 
<li data-id="138">拉斯维加斯</li> 
<li data-id="84">夏威夷</li> 
<li data-id="120">旧金山</li> 
<li data-id="105">奥兰多</li> 
<li data-id="118">西雅图</li> 
</ul>

通俗点来讲呢,你在家里看电视机,躲在大团结的小房间,可是你不期待声音传到相邻父母的耳根里,那时候,你恐怕躲在被窝里,大概墙壁的隔音效果很好,隔开声音能够领略为堵住冒泡。

是因为活动网页中选取click事件会有延迟,所以就用上了zepto.js中的tap事件。

一、要追究捕获和冒泡事件,首先要掌握什么样是事件的破获和冒泡,所以呢,先从概念动手;

js:

掣肘事件冒泡的两种花招

使用click事件能够使用stopPropagation来堵住冒泡,但tap使用该办法行不通

事件的冒泡:在叁个对象上接触某类事件(比如单击onclick事件),假诺此指标定义了那件事件的管理程序,那么此事件就能调用这么些处理程序,若无概念那件事件管理程序依好玩的事件重返true,那么那一个事件会向那一个目的的父级对象传播,从里到外,直至它被拍卖(父级对象具有同类事件都将被激活),只怕它达到了对象档次的最顶层,即document对象(有些浏览器是window)。

$("ul[data-type='cityPick']").on('click',function(){ 
alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(){ 
alert("子元素li被点击"); 
});

1、return false:能够阻止暗许事件和冒泡事件

这两天本身索要贯彻如此三个效果:点击a.btn那一个按键,然后呈现div.panel,当自个儿点击非div.panel时隐蔽div.panel

骨子里事件冒泡是四个从后代节点向祖先节点冒泡的长河,而抓获是从祖先节点到后节点的进程。

当点击具体的li成分时,开采ul的风云也被触发了,那是我们不想看到的。

2、event.stopPropagation/IE下event.cancelBubble  = true;:能够阻碍冒泡事件只是允许暗中同意事件

$("a.btn").on("tap",function(e){
  e.stopPropagation();//该方法不起作用
  $("div.panel").show();
});
$(document).on("tap",function(e){
  $("div.panel").hide();
});

本人为了方便清楚,则用先捕获,后冒泡,捕获从上到下,冒泡从下到上来纪念。作者回忆从何方看到的,有人把捕获比喻为石头沉入海底,而把冒泡比喻为气泡冒出水面。当然了,捕获的深浅取决于你的DOM布局,海底就有一点深了哈,^_^

解决:

3、event.preventDefault();/IE下event.returnValue = false:能够阻碍默许事件只是允许冒泡事件

透过调度工具,得到e那么些指标中有四个target属性,于是能够因此该属性来达成所必要的效益:

只顾:IE6、IE7、IE8只帮忙冒泡流,不协理捕获流。

$("ul[data-type='cityPick']").on('click',function(){ 
alert("父元素ul被点击"); 
}); 
$("ul[data-type='cityPick']").on('click','li',function(e){ 
e.stopPropagation();//阻止冒泡 
alert("子元素li被点击"); 
});

地点的二种方法应用在差别的情形,能够创造施用,上面是代码,能够团结做一些测量试验:

$("a.btn").on("tap",function(){
  $("div.panel").show();
});
$(document).on("tap",function(e){
  if(!$(e.target).hasClass("btn")){
    $("div.panel").hide();
  }
});

二、为何要堵住冒泡事件

加一句阻止冒泡就能够。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>jQuery阻止冒泡</title>
  <style>
    .div1{
      width: 140px;
      border: 1px solid blue;
    }
    .div2{
      width: 100px;
      height: 100px;
      margin: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
<div class="div1">
  <div class="div2">
    点我呀!!!!
  </div>
</div>
<a href="http:www.baidu.com" rel="external nofollow" id="a1">百度</a>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
  $('.div1').bind('click',function(){
    alert("div1");
  });
  $('.div2').bind('click',function(){
    alert("div2");
//    return false;//也可以通过return false 阻止冒泡
    if(window.event){//IE下阻止冒泡
      event.cancelBubble = true;
    }else{
      event.stopPropagation();
    }
  });
  $('#a1').bind('click',function(){
    if(window.event){//IE下阻止默认事件
      event.returnValue = false;
    }else{
      event.preventDefault();
    }
    alert("我是链接");
    //return false;//如果不添加任何阻止事件,先弹框,后跳转,我们可以通过return false阻止跳转
  });
</script>
</body>
</html>

如此那般算是消除了

莫不会有人问:为啥要阻拦冒泡事件吧?阻止冒泡事件有何样用处呢?