event事件冒泡之cancelBubble和stoppropagation的区别

事实上stoppropagation和cancelBubble的作用是一样的，都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于W3C标准，试用于Firefox等浏览器，但是不支持IE浏览器。相反cancelBubble不符合W3C标准，而且只支持IE浏览器。所以很多时候，我们都要结合起来用。不过，cancelBubble在新版本chrome,opera浏览器中已经支持。

语法：e.stopPropagation();

参数e：表示事件传递的参数，代表事件的状态。

[html] view plain copy

<html>
<head>
<title>冒泡测试</title>
</head>
<body onclick="alert('body');">
<div onclick="clickBtn(event)" style="width:100px;height:100px; background:#666;">
<input id="Button1" type="button" value="button" onclick="alert('btn');" />
</div>
</body>
<script language="javascript" type="text/javascript">
function clickBtn(event){
event=event?event:window.event;
event.stopPropagation();
alert("OK");
}
</script>
</html>

event事件冒泡之cancelBubble和stoppropagation的区别相关推荐

事件冒泡之cancelBubble和stoppropagation的区别
事实上stoppropagation和cancelBubble的作用是一样的,都是用来阻止浏览器默认的事件冒泡行为. 不同之处在于stoppropagation属于W3C标准,试用于Firefox等浏 ...
JS事件冒泡之cancelBubble和stoppropagation
什么是事件冒泡? 在一个对象上绑定了某类事件 (如:onclick),事件冒泡就是从当前触发的事件,由里到外,逐渐向父级对象传播,直到document为止. 其实stopPropagation的作用跟 ...
事件冒泡 bubbles cancelBubble stopPropagation() stopImmediatePropagation() 区别
<!DOCTYPE html> <html><head><meta charset="utf-8"><title>事件冒 ...
JS 中的事件冒泡与捕获
本文来源:渔人原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...
快速了解4种阻止事件冒泡的方法（原生js阻止，vue中使用修饰符阻止）
阻止事件冒泡的方法前端结构 <div id="app"><div class="father-box" @click="click ...
11.①事件冒泡：取消冒泡event.cancelBubble=true或.sopImmediatePropagation()②事件绑定addEventListener(参数1，参2，参3）③事件传播
目录一:事件冒泡: 1.冒泡指的是事件的向上传导, 2.冒泡与子元素所在位置无关,与结构有关(就算给子元素添加定位,移出父元素里面,还是会产生冒泡) 3.要取消事件的冒泡需要用到事件对象(两种方法) ...
Event事件-1:addEventListener事件监听 / 事件冒泡事件捕获 / 事件委托 / preventDefault 阻止默认行为 / cancelBubble、stopPropa...
addEventListener 事件监听器 target.addEventListener(type, listener[, options|useCapture]) 添加事件监听参数: ...
阻止事件冒泡两种方式：event.stopPropagation();和return false;
jQuery提供了两种方式来阻止事件冒泡. 方式一:event.stopPropagation(); $("#div1").mousedown(function (event) { ...
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别
今天来看看前端的冒泡和事件默认事件如何处理 1.event.stopPropagation()方法这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时 ...

event事件冒泡之cancelBubble和stoppropagation的区别

event事件冒泡之cancelBubble和stoppropagation的区别相关推荐

最新文章

热门文章