cancelbubble(event.cancelBubble的理解)

编程之家2024-01-23112次浏览

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

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

语法：e.stopPropagation();

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

[html] view plain copy

阻止事件冒泡stopPropagation的兼容写法

cancelBubble检测是否接受上层元素的事件的控制。

事件捕获其实有三种方式，事件冒泡只是其中的一种：

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload。

事件捕获方式在不同浏览器，甚至同种浏览器的不同版本中是有所区别的。如Netscape4.0采用捕获型事件解决方案，其它多数浏览器则支持冒泡型事件解决方案，另外DOM事件流还支持文本节点事件冒泡。

事件捕获到达顶层的目标在不同浏览器或不同浏览器版本也是有区别的。在IE6中HTML是接收事件冒泡的，另外大部分浏览器将冒泡延续到window对象，即……body→documen→window。

阻止冒泡并不能阻止对象默认行为。比如submit按钮被点击后会提交表单数据，这种行为无须我们写程序定制。

由于HTML中的对象都是层次结构，比如一个Table包含了多个TR，一个TR包含了多个TD。

Bubble就是一个事件可以从子节点向父节点传递，比如鼠标点击了一个TD，当前的event.srcElement就是这个TD，但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件，但是如果你event.cancelBubble，则就不能上传事件。

例子：

<html>

<head>

<title>event.cancelBubble</title>

<body>

<spanοnclick=alert("你好")>点我再点我

<spanοnclick=alert("你好")>点我<spanοnclick=event.cancelBubble=true;>再点我

</body>

</html>

扩展资料

JS之开发小技巧：数组索引

考虑一个数组[10、9、8、7、6]，如果我们想将此数组的值分配给任何变量，则我们的定位方法将是const a= array [0]。如果我们想分配多个变量，那么继续这样做将很繁琐。

更聪明的方式：

var array2= [10, 9, 8, 7, 6];

var [x, y, z,...rest]= array2;

document.write("x="+ x+" ");

document.write("y="+y+" ");

document.write("z="+z+" ");

document.write("rest="+rest+" ");

</script>

因此，像这样分配多个变量可以节省时间和代码。但是，应注意，其余部分是剩余部分的集合数组，而不是每个项目都单独使用。