欧洲杯买球下注盘口IE的事件传递-event.cancelBubble示例介绍

至于event.cancelBubble,由于HTML中的对象都是档期的顺序结构,譬如八个Table富含了多少个TEscort,叁个TR包罗了七个TD
Bubble就是贰个事件能够从子节点向父节点传递,例如鼠标点击了一个TD,当前的event.srcElement就是以此TD,不过这种冒泡机制使您能够从TLacrosse只怕Table处截获这一个点击事件,然则假设你event.cancelBubble,则就不能上传事件。
例子:

**1. 平地风波目的

复制代码 代码如下:

**今后,事件管理程序中的变量event保存着事件目的。而event.target属性保存着发惹事件的目的成分。这些天性是DOM
API中分明的,然而尚未被全部浏览器完结。jQuery对那一个事件目的开始展览了不能缺少的扩张,进而在别的浏览器中都能够利用这几个性情。通过.target,能够规定DOM中率先接受到事件的要素(即事实上被单击的成分)。并且,我们清楚this引用的是处监护人件的DOM成分,所以能够编写制定下列代码:

<html>
<body>
<table border=”1″ width=”26%” id=”tableA”
onclick=”alert(‘tableA’)”>
<tr onclick=”tableA_rowA_click()”>
<td width=”106″>一般</td>
</tr>
<tr onclick=”tableA_rowB_click()”>
<td width=”106″>阻止音信上传</td>
</tr>
</table>
<p> </p>
</body>
</html>
<!– –>
<script language=”javascript”>
<!–
function tableA_rowA_click(){
alert(‘tableA_rowA’);
}
function tableA_rowB_click(){
alert(‘tableA_rowB’);
event.cancelBubble=true;
}
//–>
</script>

复制代码 代码如下:

event.cancelBubble阻止事件冒泡,event.cancelBubble=true;

$(document).ready(function(){
 $(‘#switcher’).click(function(event){
  $(‘#switcher .button’).toggleClass(‘hidden’);
  })
 })

裁撤事件冒泡,在 IE
的事件机制中,触发事件会从子成分向父成分逐级上传,便是说,假使子成分触发了单击事件,那么也会触发父元素的单击事件;event.cancelBubble=true;能够告一段落事件继续上传补充某个,Ie的风浪传递是从下到上的:

$(document).ready(function(){
 $(‘#switcher’).click(function(event){
  if(event.target==this){
  $(‘#switcher .button’).toggleClass(‘hidden’);
  }
  })
 })
 

那时的代码确认保证了被单击的成分是<div id=”switcher”>
,实际不是别的后代成分。今后,单击按键不会再折叠样式转换器,而单击边框则会触发折叠操作。然而,单击标签同样什么也不会发出,因为它也是贰个后裔成分。实际上,大家能够不把检查代码放在此处,而是通过修改开关的表现来达到目标。

2. 休憩事件传播

事件指标还提供了多少个.stopPropagation()方法,该形式能够完全挡住事件冒泡。与.target类似,这几个方法也是一种纯JavaScript性格,但在跨浏览器的条件中则无从安然地利用
。但是,只要大家透过jQuery来注册全部的事件管理程序,就足以放心地运用那么些主意。
下边,大家会删除刚才加多的检讨语句event.target ==
this,并在开关的单击管理程序中增加一些代码:

复制代码 代码如下:

$(document).ready(function(){
 $(‘#switcher .button’).click(funtion(event){
  //……
   event.stopPropagation();
  })
 })

 
同以前同样,需求为用作单击管理程序的函数加多贰个参数,以便访谈事件目的。然后,通过简单地调用event.stopPropagation()就足以幸免别的全数DOM成分响应那几个事件。这样一来,单击开关的轩然大波会被按键管理,并且只会被按键管理。单击样式转换器的别的地方则足以折叠和强大整个区域。

3. 默许操作

假如大家把单击事件管理程序注册到贰个锚成分,并非贰个外层的<div>上,那么将在面前境遇其它三个主题材料:当用户单击链接时,浏览器会加载两个新页面。这种表现与大家谈谈的事件管理程序不是同二个概念,它是单击锚成分的暗许操作。类似地,当用户在编写制定完表单后按下回车键时,会触发布单的submit事件,在那一件事件产生后,表单提交才会真的产生。
只要大家不愿意试行这种暗中同意操作,那么在事变指标上调用.stopPropagation()方法也不算,因为默许操作不是在正规的事件传播流中产生的。在这种意况下,.preventDefault()方法规能够在触及暗中同意操作在此之前终止事件

唤醒
当在事件的条件中做到了几许验证之后,经常会用到.preventDefault()。比方,在表单提交时期,大家会对用户是还是不是填写了必填字段进展检讨,借使用户未有填写相应字段,那么就须要阻止暗中认可操作。大家就要第8章详细座谈表单验证。
事件传播和默许操作是相互独立的两套机制,在两岸任何一方产生时,都足以告一段落另一方。假设想要同不常候甘休事件传播和私下认可操作,能够在事件管理程序中回到false,那是对在事变目标上同不时候调用.stopPropagation()和.preventDefault()的一种简写情势。

补充:

复制代码 代码如下:

//单击开关事件(改换文字样式)
$(document).ready(function() {
   $(‘#switcher .button’).click(function() {
     $(‘body’).removeClass();
     if (this.id == ‘switcher-narrow’) {
       $(‘body’).addClass(‘narrow’);
     }
     else if (this.id == ‘switcher-large’) {
       $(‘body’).addClass(‘large’);
     }

     $(‘#switcher .button’).removeClass(‘selected’);
     $(this).addClass(‘selected’);
   });
});

//单击按钮外层div出发事件(隐蔽按键)
$(document).ready(function() {
   $(‘#switcher’).click(function() {
     $(‘#switcher .button’).toggleClass(‘hidden’);
   });
});

当今的难点是,当点击了开关时,同不平日候触发了遮蔽开关事件。那是事件冒泡导致。
为了阻拦事件冒泡,须要为遮盖开关函数增添三个参数:

复制代码 代码如下:

$(document).ready(function() {
   $(‘#switcher’).click(function(even) {
     if(even.target==this){
       $(‘#switcher .button’).toggleClass(‘hidden’);
     }
   });
});

even保存事件指标,even.target属性保存发滋事变的靶子成分。能够规定DOM中第一接受到事件的因素。此时期码确定保证了被单击的是<div
id=”switcher”>,并不是其后裔成分。

也足以如此管理,通过修改按键的表现来完毕指标。

复制代码 代码如下:

$(document).ready(function() {
   $(‘#switcher .button’).click(function(even) {
     $(‘body’).removeClass();
     if (this.id == ‘switcher-narrow’) {
       $(‘body’).addClass(‘narrow’);
     }
     else if (this.id == ‘switcher-large’) {
       $(‘body’).addClass(‘large’);
     }

     $(‘#switcher .button’).removeClass(‘selected’);
     $(this).addClass(‘selected’);
     even.stopPropagation();
   });
});

用JS阻止事件冒泡

事件冒泡:
当贰个成分上的平地风波被触发的时候,比方说鼠标点击了三个按钮,同样的风云将会在异常成分的保有祖先成分中被触发。这一经过被称呼事件冒泡;那么些事件从原始成分初阶一向冒泡到DOM树的最上层。
能够用JS来堵住js事件冒泡。因为浏览器的差距IE和FF的JS写法有一点不相同样。
IE用cancelBubble=true来阻止而FF下要求用stopPropagation方法。
下一下安然无事的代码:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>无标题文书档案</title>
<script type=”text/javascript”>
function aaaclick(){
 alert(“td click”);
}
function bbbclick(evt){
 alert(“td click”);
 if (window.event) {
  event.cancelBubble = true;
 }else if (evt){
  evt.stopPropagation();
 }
}
function trclick(){
 alert(“tr click”);
}

function tableclick(){
 alert(“table click”);
}
</script>

<style type=”text/css”>
<!–
.tab {
 border: 1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
.tab td{
 border: 1px solid #0066FF;
}
–>
</style>
</head>

<body>
<p>点击aaaa会触发上层的onclick事件,点击bbbb不会触发上层onclick事件</p>
<table width=”204″ onclick=”tableclick()” class=”tab”>
  <tr >
    <td width=”96″> </td>
    <td width=”96″> </td>
  </tr>
  <tr onclick=”trclick()”>
    <td onclick=”aaaclick()”>aaaa</td>
    <td onclick=”bbbclick(event)”>bbbbb</td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>

你或然感兴趣的稿子:

  • 阻拦JavaScript事件冒泡传递(cancelBubble
    、stopPropagation)
  • js阻止私下认可事件与js阻止事件冒泡示例分享js阻止冒泡事件
  • javascript事件冒泡详解和破获、阻止方法
  • js冒泡、捕获事件及阻止冒泡方法详细总计
  • js阻止冒泡及jquery阻止事件冒泡示例介绍
  • zepto.js中tap事件阻止冒泡的贯彻格局
  • javascript阻止scroll事件反复实施的思路及落成
  • JS阻止冒泡事件以及暗中同意事件爆发的大概方法
  • javascript阻止浏览器后退事件幸免误操作清空表单
  • JavaScript达成事件的间歇传播和作为阻碍方法以身作则

相关文章