vue.js – event对象兼容性问题_vue 打包兼容性event

应用场景：头部【搜索功能】

点击全局页面任意位置搜索框下的下拉框隐藏，此时点击搜索框输入信息时需要阻止冒泡，event.stopPropagation()；此时没有注意这点event，在浏览器中会有问题。

追根溯源 ：event对象

 Event对象代表事件的状态，比如事件在其中发生的元素，键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用，函数不会再事件发生前执行。

window.event在IE和谷歌中有效，而在火狐浏览器中失效，控制台打印结果是undefined，原因，火狐的event只能在事件发生的现场使用。

解决办法：

方法1、在事件发生的函数中加上event参数（设形参为event），在函数体内使用

var  e = event ? event : (window.event ? window.event : null)；

或者 var e = window.event || event

方法2、如果函数调用中不传递event对象，要用以下办法：

var evt = window.event || argument.callee.caller.arguments[0] //获取event对象

    var src = evt.srcElement || evt.target ; // 获取触发事件的源对象

    var iKeyCode = evt.keyCode || evt.which; //获取按钮代码 ；

拓展：event.srcElement问题
问题说明：IE下，even对象有srcElement属性，但是没有target属性；Firefox下，even对象有target属性，但是没有 srcElement属性。
解决方法：使用srcObj = event.srcElement ? event.srcElement : event.target;

如果在jQuery中，直接用 event.XXX ()，jQ解决了兼容性问题;

好了到此为止event兼容性问题基本解决了。

初次使用vue.js中event对象，如果没有看过vue.js中对event对象说明，一般就会直接用上面的方法了，此时恭喜你，终于遇到本文重点要讲的内容，vue.js，event对象的兼容问题，火狐浏览器中会失效；

那么解决办法如下：

  第一步在 函数中加$event 例如 

       <div @click=’test($event)’></div>

第二步在 methods 中添加方法 

 Methods：{

Test(event){ event.stopPrapagation()};

}

Ok到这里就把event对象的兼容问题解决了。

延申：

   本文中提到的阻止冒泡 在vue中有自己特有的写法 修饰符。

.stop //阻止冒泡

上面的

<div @click=’test($event)’></div> 

Methods：{

Test(event){ event.stopPrapagation()};

}

等同于

<div @click.stop=’test’></div>

• .prevent //阻止默认事件
• .capture//事件捕获 自顶向下事件监听
•  
• .self // 只当事件触发在本身时候执行事件
•