事件的三个阶段:捕获阶段 目标阶段 冒泡阶段及防止冒泡和捕获

最恰当的比喻:可以想象画在一张纸上的一组同心圆,如果你把手指放在圆心上,那么你的手指指向的其实不是一个圆,而是纸上所有的圆。放到实际页面中就是,你点击一个按钮,事实上你还同时点击了按钮所有的父元素。

事件流阶段是

!!!我觉得写一个 demo 更容易理解

思考:那是不是所有的事件都要经历这三个过程呢?

防止冒泡和捕获

   事件处理过程中,阻止了事件冒泡,但不会阻止默认行为

   事件处理过程中,阻止了事件冒泡,也阻止了默认行为

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

取消默认事件

   preventDefault 它是事件对象(Event)的一个方法,作用是取消一个目标元素的默认行为

总结

function stopBubble(e) { 
//如果提供了事件对象,则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
    //因此它支持W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否则,我们需要使用IE的方式来取消事件冒泡 
    window.event.cancelBubble = true; 
}
//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函数器默认动作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

事件注意点

  1. event 代表事件的状态,例如触发 event 对象的元素、鼠标的位置及状态、按下的键等等;
  2. event 对象只在事件发生的过程中才有效。
function a(e){
	var e = (e) ? e : ((window.event) ? window.event : null); 
	var e = e || window.event; // firefox下window.event为null, IE下event为null
}

总结参考与:http://caibaojian.com/javascript-stoppropagation-preventdefault.html

补充 1:vue 防止冒泡和捕获

<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div @click.self="doThat">...</div>

补充 2:React 防止冒泡和捕获

  由上述可知:原生 JavaScript 有这两种 event.cancelBubble = trueevent.stopPropagation(), 防止冒泡和捕获;但是 React,使用 event.cancelBubble 没有效果,return false 也没有效果

  官方也说了,在 React 中不能使用 return false 的方式阻止默认行为;

阻止冒泡: e.nativeEvent.stopImmediatePropagation() 方法

  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    211 引用 • 1324 回帖 • 2 关注
  • 总结
    171 引用 • 1569 回帖 • 2 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    186 引用 • 602 回帖 • 547 关注
  • React

    React 是 Facebook 开源的一个用于构建 UI 的 JavaScript 库。

    154 引用 • 238 回帖 • 568 关注
回帖
请输入回帖内容...