JS-阻断事件传播:stopPropagation,preventDefault以及stopImmediatePropagation

  最近遇到一个需求,在一定情况下,需要阻断blur的事件传播。搜索之后找到三个函数,第一个是preventDefault,第二个是stopPropagation,第三个是stopImmediatePropagation 。

  preventDefault:

      语法是:

          event.stopPropagation();

      这个函数的作用是阻止事件进一步冒泡,进而被其他节点接收。

  preventDefault:

     语法是:

          event.preventDefault();

      这个函数与前者不同在于他阻止的是事件默认的动作,但是并不会阻止事件的继续传播。例如<a>标签的click默认的动作是打开链接。但是使用这个函数之后会阻止这个动作。但同时这个事件可以传播给这个标签或者原远的click listener. 但是这个函数只支持cancelable的事件。可以通过event.cancelable来检查。同时在事件的任一阶段调用这个函数意味着默认的动作都不会执行。

    参考:https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

  stopImmediatePropagation:
      语法:

          event.stopImmediatePropagation();

      这个函数用于阻断同一element的事件传播。 例如一个element上定义了多个listener,如果其中一个调用这个方法后面的listener则都不会执行。

另外,还有return false,这种方式确实可以阻止事件默认行为的执行,例如form的submit,但是有的人提到这个办法还包含其他内容例如退出循环等等,所以显得不够灵活。

最后,我的需求是监听window.blur的,所以,只能先于原有的监听器的前面先执行判断,条件满足则执行stopImmediatePropagation 来阻止它传递到页面的监听器。

      

  

  

  

时间: 2024-10-14 23:13:12

JS-阻断事件传播:stopPropagation,preventDefault以及stopImmediatePropagation的相关文章

js阻止事件冒泡stopPropagation()、cancelBubble、preventDefault()、return false的分析

事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> <script> $('li').click(function () { alert('点击了li'); }); $('a').click(function () { alert('点击了a'); }); </script> 当你点击a的时候,会先弹出‘点击了a’,再弹出‘点击了li’,最后跳转到百度.简单理解就是

JS阻止事件传播和默认行为

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 3 <head> 4 &l

js事件之event.preventDefault()与(www.111cn.net)event.stopPropagation()用法区别

event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单.注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作.无论哪种情况,调用该方法都没有作用. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作

js事件之event.preventDefault()与event.stopPropagation()用法区别

event.preventDefault()用法介绍 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作).例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单.注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作.无论哪种情况,调用该方法都没有作用. 该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作

[JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播

-->事件冒泡和捕获-->事件监听-->阻止事件传播 一.事件冒泡和捕获 1.概念:当给子元素和父元素定义了相同的事件,比如都定义了onclick事件,点击子元素时,父元素的onclick事件也会被触发.js里称这种事件连续发生的机制为事件冒泡或者事件捕获.IE浏览器:事件从里向外发生,事件从最精确对象(target)开始触发,然后到最不精确的对象(document)触发,即事件冒泡 Netscape:事件从外向里发生,事件从最不精确的对象(document)开始触发,然后到最精确对象(

Js事件传播流程

Js事件传播流程 js事件传播流程主要分三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 在我们平常用的addEventListener方法中,一般只会用到两个参数,一个是需要绑定的事件,另一个是触发事件后要执行的函数,然而,addEventListener还可以传入第三个参数,第三个参数默认值是false,表示在事件冒泡阶段调用事件处理函数;如果参数为true,则表示在事件捕获阶段调用处理函数.   (1). 捕获阶段:事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获

JS中的事件传播流程

JS中的事件传播流程 1,Javascript与HTML之间的交互是通过事件实现的. 事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间. 可以使用侦听器来预定事件,以便事件发生时执行相应代码. 2,DOM事件流存在三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段. 事件流:事件发生时,事件在元素节点与根节点之间的顺序传播,路径所经过的所有节点都会收到该事件,这个传播过程即DOM事件流.事件传播顺序的两种事件流模型:事件冒泡,事件捕获. 事件捕获(event capturing):事件从最不

return、reutrn false、e.preventDefault、e.stopPropagation、e.stopImmediatePropagation的区别

return var i = function(){ return } console.log(i())//undefined return的主要作用是阻止函数继续执行,直接返回undefined return false <a class="baidu" href="http://www.baidu.com">百度</a> $('.baidu').on('click',function(e){ console.log(1) return f

JS事件传播和JSBom部分总结

1.JS事件传播 JS Bom 原文地址:https://www.cnblogs.com/liu-web-bew/p/9345645.html