【兼容性】IE10中使用vue.js出现event或event.target未定义问题。

问题描述

  • 在html界面用 v-on:xx 的方式去绑定一个事件函数时IE10 控制台报错 “valid未定义
  • 问题代码示例:
<input type="text" v-on:click="valid"/>
<!-- JS 部分-->
<script>
var app = new Vue({
el:"省略",
data:{},
methods:{
	valid:function(event){
		console.log(event.target.tagName);
	}
}
});
</script>
  • 解决过程1:
    我将html中的v-on:click="valid"改为了v-bind:click="valid();"。然后控制台出现了新的错误,但是至少确信了 在IE中不支持函数省略括号的写法。
    新的错误是 event.target未定义,于是进入下步解决过程。
  • 解决过程2:
    将html中的v-on:click="valid();"改为了v-on:click="valid($event);"。在事件被触发后会向 valid(event) 函数传递vue中定义的 $event 实例对象,问题得以解决。

修改之后的代码

<input type="text" v-on:click="valid($event);"/>
<!-- JS 部分-->
<script>
var app = new Vue({
el:"省略",
data:{},
methods:{
	valid:function(event){
		console.log(event.target.tagName);
	}
}
});
</script>
posted @ 2018-07-13 16:36  TylorChen  阅读(2213)  评论(0编辑  收藏  举报