event.stopPropagation()

stopPropagation方法阻止事件在 DOM 中继续传播，防止再触发定义在别的节点上的监听函数，但是不包括在当前节点上其他的事件监听函数。

function stopEvent(e) {e.stopPropagation();
}el.addEventListener('click', stopEvent, false);

上面代码中，click事件将不会进一步冒泡到el节点的父节点。

event.preventDefault()

Event.preventDefault方法取消浏览器对当前事件的默认行为

这是阻止默认事件的方法，调用此方法是，连接不会被打开，但是会发生冒泡，冒泡会传递到上一层的父元素；
比如点击链接后，浏览器默认会跳转到另一个页面，使用这个方法以后，就不会跳转了；
该方法生效的前提是，事件对象的cancelable属性为true，如果为false，调用该方法没有任何效果。

<input type="checkbox" id="my-checkbox" />var cb = document.getElementById('my-checkbox');
cb.addEventListener('click',function (e){ e.preventDefault(); },false
);

上面代码中，浏览器的默认行为是单击会选中单选框，取消这个行为，就导致无法选中单选框。

return false

这个方法会同事阻止事件冒泡也会阻止默认事件
使用该方法后链接不会被打开，事件也不会传递到上一层的父元素，比如表单将终止提交。
可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

$(".box1").click(function(){console.log("1")
}); $(".box1 a").click(function(event){return false;  //页面不会跳转，也不会打印出1，等于同时调用了event.stopPropagation()//和event.preventDefault()
}

阻止事件冒泡(event.stopPropagation())/阻止默认事件(event.preventDefault())相关推荐

什么是事件冒泡？如何阻止事件冒泡？
什么是事件冒泡?如何阻止事件冒泡? 比如说在一个层层嵌套的HTML元素中,触发了最里面的那个HTML元素的某个事件,接下来会自里向外相继触发每一层HTML元素的相同事件,这就是事件冒泡.阻止事件冒泡可 ...
javascript阻止事件冒泡和浏览器的默认行为
http://www.aspxhome.com/javascript/skills/200712/262128.htm 就是说用Div框住flash Div的鼠标事件不传递给Body 文中说的方法记 ...
事件流--事件冒泡现象及阻止
事件冒泡现象 <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF ...
android 防止点击事件冒泡,移动端阻止事件冒泡需要注意！
移动端使用的js插件式zepto和touch,想要在一个大的区域做一个点击事件,但是里面小的区域也有自己的点击事件,就要阻止事件冒泡,但是使用了之后发现不好使,原因是:大的区域使用的事件是移动端的ta ...
移动端触摸相关事件踩坑（touchmove默认事件以及passive）
移动端移动事件监听(touch.默认行为) 最近在写一个移动端网页中会遇到滑动事件监测问题,来解决用户在canvas画布中移动效果 touchmove.默认触发事件e.preventDefault() ...
关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
click事件在什么时候出发_关于JS 事件冒泡和onclick,click,on()事件触发顺序
今天在给JQgrid中的标签添加click事件的时候,发现一个问题. JQgrid的table中,点击任何位置,都会勾选点击行的checkbox,而我希望在点击我的标签的时候,不要勾选checkbox ...
JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲事件的冒泡机制和添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段捕获阶段是指从父层往子层找.比如 <body> ...
事件冒泡、事件捕获、http与https
事件流.事件冒泡.事件捕获.阻止事件冒泡.http与https 目录事件流.事件冒泡.事件捕获.阻止事件冒泡.http与https 一.事件流二.事件冒泡三.事件捕获四.阻止事件冒泡五.取消 ...
jQuery之防止【冒泡事件】，阻止默认行为【return false】 event.stopPropagation event.preventDefault...
知识点: event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件,比如button提交后跳转到链接页面两者都可以用 return ...

阻止事件冒泡(event.stopPropagation())/阻止默认事件(event.preventDefault())

event.stopPropagation()

event.preventDefault()

return false

阻止事件冒泡(event.stopPropagation())/阻止默认事件(event.preventDefault())相关推荐

最新文章

热门文章