JavaScript中使用stopPropagation函数停止事件传播例子
JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播。如以下例子:
HTML代码:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button>button</button> </body> </html> [/code] 没有加stopPropagation() [code] var button = document.getElementsByTagName('button')[0]; button.onclick=function(event){ alert('button click'); }; document.body.onclick=function(event){ alert('body click'); }
DOM逐层往上传播,所以单击button按钮也传播到了body层,于是body层的click也响应了。结果弹出两个警告框,分别是button与body。
加了stopPropagation()
var button = document.getElementsByTagName('button')[0]; button.onclick=function(event){ alert('button click'); // 停止DOM事件层次传播 event.stopPropagation(); }; document.body.onclick=function(event){ alert('body click'); }
在button的单击事件处理函数中使用了stopPropagation()停止事件传播函数,所以在弹出来自button单击事件的警告框以后就传播不到body,也就不会再次弹出body的警告框,结果只谈一次警告框。
好多童鞋在写JS的时候,往往忽视了DOM事件逐层往上传播的特性,导致程序出现异常。如果需要了解更深入的知识可以找找有关JS事件冒泡的资料看看。
相关推荐
-
关于捕获用户何时点击window.onbeforeunload的取消事件
Detecting When The User Has Clicked Cancel One of the things you may want to do is to be notified when the user clicks cancel, aborting a page unload. Unfortunately there's no way to be immediately notified. The best you can do is to set a unique glo
-
jquery取消事件冒泡的三种方法(推荐)
1.通过返回false来取消默认的行为并阻止事件起泡. jQuery 代码: $("form").bind( "submit", function() { return false; } ); 2.通过使用 preventDefault() 方法只取消默认的行为. jQuery 代码: $("form").bind( "submit", function(event){ event.preventDefault(); } );
-
flex中event.preventDefault()方法取消事件的默认行为
先看一个例子: 复制代码 代码如下: <mx:DataGrid id= "songList" dataProvider= "{songDB}" width= "100%" height= "100%" editable= "true" itemEditEnd="itemEditEndHandler(event)" itemEditBeginning= "itemEditB
-
js如何取消事件冒泡
复制代码 代码如下: function stopBubble(e) { //如果传入了对象,那么就是非IE浏览器,才用W3C标准方法 if (e || e.stopPropagation) { e.stopPropagation(); } else { //才用IE的停止事件冒泡的方法 window.event.CancelBubble = true; } }
-
Javascript Event(事件)的传播与冒泡
特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或cancelBubble阻止事件传播,而ie8-用e.cancelBubble属性来阻冒泡,注意ie9不支持cancelBubble属性(设置后不生效),但chrome.safari.opera.firefox都支持cancelBubble属性. Ie8-用attachEvent为dom元素添加一个事件,但必须在事件名前加上on,此类事件只能
-
阻止事件(取消浏览器对事件的默认行为并阻止其传播)
取消浏览器对事件的默认行为(响应)(比如<a>标签的跳转等)并停止事件的继续传播. 实现代码 复制代码 代码如下: function stopEvent (evt) { var evt = evt || window.event; if (evt.preventDefault) { evt.preventDefault(); evt.stopPropagation(); } else { evt.returnValue = false; evt.cancelBubble = true; } }
-
JS传播事件、取消事件默认行为、阻止事件传播详解
1.事件处理程序的返回值 通常情况下,返回值false就是告诉浏览器不要执行这个事件相关的默认操作.例如,表单提交按钮的onclick事件处理程序能通过返回false阻止浏览器提交表单,再如a标签的onclick事件处理程序通过返回false阻止跳转href页面.类似地,如果用户输入不合适的字符,输入域上的onkeypress事件处理程序能通过返回false来过滤键盘输入. 事件处理程序的返回值只对通过属性注册的处理程序才有意义. 2.调用顺序 文档元素或其他对象可以为指定事件类
-
JavaScript实现事件的中断传播和行为阻止方法示例
事件传播 MicroSoft的设计是当事件在元素上触发时,该事件将接着在该节点的父节点触发,以此类推,事件一直沿着DOM树向上传播,直到到达顶层对象document元素.这种自底向上的事件传播方式称为"事件冒泡",也就是事件传播. 如何中断事件的传播? stopPropagation() w3c取消冒泡 cancleBubble = true IE取消冒泡 取消事件默认效果: returnValue = false IE 取消事件效果 defaultPrevent() w3c取消事件效
-
JavaScript中使用stopPropagation函数停止事件传播例子
JS中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播.如以下例子: HTML代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>stopPropagation()使用 - 琼台博客</title> </head> <body> <button&
-
JavaScript中的Function函数
首先给大家介绍JavaScript中function定义函数的几种方法: 1.最基本的作为一个本本分分的函数声明使用. 复制代码 代码如下: function func(){} 或 复制代码 代码如下: var func=function(){}; 2.作为一个类构造器使用: function class(){} class.prototype={}; var item=new class(); 3.作为闭包使用: (function(){ //独立作用域 })(); 4.可以作为选择器使用:
-
详解JavaScript中的箭头函数的使用
目录 前言 箭头函数语法 无圆括号语法 隐式返回 注意隐式返回错误 无法命名箭头函数 如何处理this关键字 匿名箭头函数 不正常工作的情况 箭头函数作为对象方法 箭头函数与第三方库 箭头函数没有arguments对象 总结 前言 本文可以让你了解所有有关JavaScript箭头函数的信息.我们将告诉你如何使用ES6的箭头语法,以及在代码中使用箭头函数时需要注意的一些常见错误.你会看到很多例子来说明它们是如何工作的. JavaScript的箭头函数随着ECMAScript 2015的发布而到来,
-
javascript中Array()数组函数详解
在程序语言中数组的重要性不言而喻,JavaScript中数组也是最常使用的对象之一,数组是值的有序集合,由于弱类型的原因,JavaScript中数组十分灵活.强大,不像是Java等强类型高级语言数组只能存放同一类型或其子类型元素,JavaScript在同一个数组中可以存放多种类型的元素,而且是长度也是可以动态调整的,可以随着数据增加或减少自动对数组长度做更改. Array()是一个用来构建数组的内建构造器函数.数组主要由如下三种创建方式: array = new Array() array =
-
JavaScript中的工厂函数(推荐)
在学习jQuery的时候,我们经常会看到"工厂函数"这个概念,那么究竟什么是"工厂函数"呢?我们来看看概念,"所谓工厂函数,就是指这些内建函数都是类对象,当你调用他们时,实际上是创建了一个类实例".意思就是当我调用这个函数,实际上是先利用类创建了一个对象,然后返回这个对象.由于Javascript本身不是严格的面向对象的语言(不包含类),实际上来说,Javascript并没有严格的"工厂函数",但是在Javascript中,我
-
JavaScript中字符串分割函数split用法实例
本文实例讲述了JavaScript中字符串分割函数split用法.分享给大家供大家参考.具体如下: 先来看下面这段代码: <script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("&q
-
JavaScript中push(),join() 函数 实例详解
定义和用法 push方法 可向数组的末尾添加一个或多个元素,并返回一个新的长度. join方法 用于把数组中所有元素添加到一个指定的字符串,元素是通过指定的分隔符进行分割的. 语法 arrayObject.push(newelement1,newelement2,....,newelementX) arrayObject.join(separator). 参数描述newelement1必需.要添加到数组的第一个元素.newelement2可选.要添加到数组的第二个元素.newelementX可选
-
深入认识javascript中的eval函数
1)介绍javascript中的eval函数的用法 (2)如何在函数内执行全局代码 ►先来说eval的用法,内容比较简单,熟悉的可以跳过. eval函数接收一个参数s,如果s不是字符串,则直接返回s.否则执行s语句.如果s语句执行结果是一个值,则返回此值,否则返回undefined. 需要特别注意的是对象声明语法"{}"并不能返回一个值,需要用括号括起来才会返回值,简单示例如下: 复制代码 代码如下: var code1='"a" + 2'; //表达式 var c
-
浅谈JavaScript中变量和函数声明的提升
现象: 1. 在JavaScript中变量和函数的声明会提升到最顶部执行. 2. 函数的提升高于变量的提升. 3. 函数内部如果用var声明了相同名称的外部变量,函数将不再向上寻找. 4. 匿名函数不会提升. 5. 不同<script>块中的函数互不影响. 例子: 函数声明提升高于变量声明 //同时声明变量a和函数a var a; function a() {} alert(typeof a); //显示的是"function",初步证明function的优先级高于var.
-
JavaScript中cookie工具函数封装的示例代码
一. 语法 1.1 获取当前页面的所有cookie: var allCookies = document.cookie; allCookies 是一个字符串,其中包含了以分号分隔的cookie列表字符串 (即 key=value 键值对). 1.2 写一个新cookie: document.cookie = updatedCookie; updatedCookie是一个键值对形式的字符串.只能用这个方法一次设置或更新一个cookie,而且写入并不是覆盖,而是添加.例如: document.coo
随机推荐
- 如何用word vb宏来生成sql
- 在SQL Server中迁移数据的几种方法
- ASP.NET Page函数调用顺序解析
- Delphi中判断文件是否为文本文件的函数
- C#实现HTML转WORD及WORD转PDF的方法
- Android中WebView实现点击超链接启动QQ的方法
- php页面缓存方法小结
- 用JS在浏览器中创建下载文件
- nodejs事件的监听与触发的理解分析
- php实现文件下载实例分享
- MongoDB中强大的统计框架Aggregation使用实例解析
- Oracle 10g各个帐号的访问权限、登录路径、监控状态命令查询等等
- jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
- 纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
- 简单实现IONIC购物车功能
- 详解C++编程中类模板的相关使用知识
- 用Visual Studio2017写C++静态库图文详解
- asp.net上传图片到服务器方法详解
- PHP正则替换函数preg_replace()报错:Notice Use of undefined constant的解决方法分析
- Opencv分水岭算法学习