Javascript和jquery事件--阻止事件冒泡和阻止默认事件

时间:2021-10-01 03:51:01

阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量

我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交、超链接跳转等)。

  1. 点击按钮子元素的时候不希望触发父元素的点击事件。
  2. 之前提到的mouseout事件。
  3. 在大部分元素上滚动鼠标滑轮都会触发body的界面滑动(如果界面有滚动条)
  4. 在有滚动条的元素中滚动不会触发body界面的滑动,但是滑条滑到底部或者顶部并继续滑动的时候会触发父元素乃至body整体的界面滑动。

其中,1、2涉及的是事件的冒泡,3、4涉及的则是事件的默认事件。

在jq中使用的是(其中的event是一个全局变量,也许?我并没有定义它,而是直接拿来用的):

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止默认行为

在js中:

function clickfunction(e){

var event = e||window.event;//兼容

event.stopPropagation();//阻止冒泡

event.preventDefault();//阻止默认行为

}

可以看出只是event的获取方式不同。

---------------------------------------------------------------------------------------------------------------------------

补充一点,我似乎忘了它的兼容写法

阻止浏览器默认行为兼容性写法

event.preventDefault ? event.preventDefault() : (event.returnValue = false);

阻止冒泡写法

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);