vue和原生js阻止冒泡和默认事件

vue和原生js阻止冒泡和默认事件

其几天看文章的时候看到了这样一句话，不上代码空谈理论的都是老流氓，咱还是实实在在的分享一些东西，如有错误，欢迎评论指正。

肯定这里少不了提到什么是冒泡？什么是捕获？

冒泡阶段： 事件冒泡会从当前触发的事件目标一级一级往上传递，依次触发，直到document为止。

（这个解释太官方，我理解的就是说有n个同心圆，当我们用手指点击第一个的时候，会依次触发下边的所有的同心圆，知道最后document）

捕获阶段： 事件捕获会从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止。

（同样白话解释一下，和冒泡相反，同样的n个同心圆，当手指点击第一个时候，会从最下边依次往上触发，直到第一个也就是我们的目标触发）

默认事件： 比较通俗易懂了，就是本身带有的事件，比如我们浏览器中右键默认弹出菜单等等

我们今天的议题是如何解决阻止默认事件和取消事件冒泡
我们原生js也可以，我们的vue也可以，今天写两个版本，简单

原生js取消事件冒泡

在原生js中防止冒泡和捕获中是区分不同的浏览器的
w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true

下面我们用两种方法写取消冒泡事件，一种是try catch，一种是判断

try{
        e.stopPropagation();//非IE浏览器
    }
    catch(e){
        window.event.cancelBubble = true;//IE浏览器
    }

function stopBubble(e) { //这里是传入的事件$event
//如果提供了事件对象，则这是一个非IE浏览器 
	if ( e && e.stopPropagation ) 
    			//因此它支持W3C的stopPropagation()方法 
   		e.stopPropagation(); 
	else 
  			  //否则，我们需要使用IE的方式来取消事件冒泡 
   		window.event.cancelBubble = true; 
}

原生js阻止默认事件

取消默认事件
w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false;
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。什么元素有默认行为呢？如链接a标签，提交按钮等。当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。

function(e){
if ( e && e.preventDefault ) {
            e.preventDefault()//非IE浏览器
} else { window.event.returnValue = false;  //IE浏览器
}
}

那么对于vue解决就很容易了

vue.js取消事件冒泡

<div @click.stop="doSomething($event)">vue取消事件冒泡</div>

vue.js阻止默认事件

<div @click.prevent="doSomething($event)">vue阻止默认事件</div>

那么我看这里的时候有有点疑惑就是prevent和stop很清晰明了是阻止默认事件和取消事件冒泡的，但是后边为什么还跟着一个方法？

<!--不阻止右键菜单(浏览器行为)，右键执行函数show-->
<input type="button" value="按钮" @contextmenu="show()">
<!--阻止右键菜单-->
<input type="button" value="按钮1" @contextmenu.prevent>
<!--阻止右键菜单(浏览器行为)，右键执行函数show-->
<input type="button" value="按钮1" @contextmenu.prevent="show1()">

我也是查了下，具体右键事件具体分析，其实这个方法表示阻止了原来的默认事件，但是执行后边的方法，也就是此时右键为show1事件！

好了内容不在于多，在于精，这也是为下次写原生的组件右键浏览器任意位置跳出菜单做预热一下吧！
还是那句话，每天进步一点点，积少成多，必成大器！