阻止事件默认行为和事件冒泡行为

1.阻止事件默认行为

事件的默认行为：如a标签的默认跳转行为，表单的默认提交行为。
假如我们想让a标签不跳转到href所对应的地址，假如我们想在表单提交前做一些操作怎么办呢。这个时候就要用到阻止事件默认行为。

HTML：

<a href="http://www.baidu123.com" class="a">百度</a>

Javascript：

    a.onclick = function (e) {// ie678中没有preventDefault这个方法，可以用下面的returnValue兼容e.preventDefault()e.returnValue = false}a.addEventListener("click", function (e) {// ie678中没有preventDefault这个方法，可以用下面的returnValue兼容e.preventDefault()e.returnValue=false})

不论是传统的事件绑定模式，还是通过addEventListener绑定事件的模式都可以使用事件对象的preventDefault（）方法和事件对象的returnValue=false这两种方法来阻止事件默认行为。returnValue和后文讲的return false不一样，不能同时阻止事件默认行为和事件冒泡行为。

阻止默认事件的第三种方式（仅适用于传统事件绑定方式）

Javascript：

    a.onclick = function (e) {//仅适用于这种传统的事件绑定，不适用与addEventListener和attachEvent事件绑定方式return false}

与上面两种取消默认事件的方式不同的是，这种方式仅适用于这种传统的事件绑定，不适用与addEventListener和attachEvent事件绑定方式。
看到网上有的人说return false可以同时取消默认行为和冒泡行为，但是对于这一点做实验发现是只能在Jquery中实现这个功能，在原生的JS中好像只能实现取消默认行为。最后提醒一点，能不用return false就不用，尽量用前面两种方式。

2.阻止事件冒泡行为

事件冒泡可以实现事件委托，但是有时候事件冒泡在实际开发过程中也会带来意向不到的坏处，所以有时候事件会冒泡到父元素及祖先元素身上带来一些影响，这个时候我们也要阻止冒泡。

HTML：

    <div class="parent"><div class="child"></div></div>

CSS：

        .parent {width: 300px;height: 300px;background-color: #bfa;}.child {width: 200px;height: 200px;background-color: red;}

Javascript：

    child.onclick = function (event) {// 取消冒泡行为同样有兼容性,ie678中可以使用cancelbubbleevent.stopPropagation()event.cancelBubble=trueconsole.log("I am child")}child.addEventListener("click", function (e) {// 取消冒泡行为同样有兼容性,ie678中可以使用cancelbubbleevent.stopPropagation()event.cancelBubble = trueconsole.log("I am child")})parent.onclick = function (event) {console.log("I am parent")}

不论是传统的事件绑定模式，还是通过addEventListener绑定事件的模式都可以使用事件对象的stopProPagation（）方法和事件对象的cancelBubble=true这两种方法来阻止事件冒泡。
在JQuery中，也可以通过return false来实现取消事件冒泡。同时也要满足一点return false只能应用于原生的时间绑定方式身上。

阻止事件默认行为和冒泡行为

阻止事件默认行为和事件冒泡行为相关推荐

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...
JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消 ...
js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
jquery阻止默认行为_Jquery 事件冒泡以及阻止默认事件
1.e.preventDefault()阻止事件默认行为 e.preventDefault();----根据英文意思,如:xx $("#xx").click(function(e) ...
html js 禁用浏览器上下滑动,纯JS阻止浏览器默认滚动事件，实现自定义滚动方法...
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
JS、阻止 a 标签的默认点击事件，阻止默认的所有事件
JS.阻止 a 标签的默认点击事件,阻止默认的所有事件 1 . javascript:void(0) 空处理缺点:当超链接有target="_blank"属性时,点击后任然会跳出 ...
vue阻止浏览器默认事件
项目中遇到长按.鼠标右键等操作时,会出发浏览器的默认事件,这时候我们要阻止浏览器默认事件,在vue中阻止默认事件,可以使用 @contextmenu.prevent=""实现

阻止事件默认行为和事件冒泡行为

1.阻止事件默认行为

2.阻止事件冒泡行为

阻止事件默认行为和事件冒泡行为相关推荐

最新文章

热门文章