一、问题描述:
两个div切换显示;第一个是负责数据显示;第二个是选择要显示的数据,默认显示第一个DIV容器,选择时候隐藏第一个容器,显示第二个容器选择数据,鼠标离开后隐藏第二个容器,显示第一个容器,两个IDV容器切换显示;问题是点击以后鼠标还未离开第二个容器就已经小时了,没法选中数据去第一个容器里边显示;
二、示例代码
示例代码如下:
<div>
<div v-if="!show" @click="showClick">{{levelStr}}</div>
<div class=" biaConfirmHtmlSelect tempSeleceBox" v-else @mouseleave="updateShow">
<select @change="update" v-model="value">
<option :value="item.value" :selected="value==item.value" v-for="item in resultArr">{{item.name}}</option>
</select>
</div>
</div>
methods: {
update: function(event) {
var params = {
type: 'edit',
index: this.index,
rowData: this.rowData,
field: this.field,
value: this.value
};
this.value = event.target.value;
this.rowData[this.field] = this.value;
this.$emit('on-custom-comp', params);
this.show = !this.show;
},
updateShow: function(event) {
if (window.event.toElement == null) return;
this.show = false;
},
showClick: function() {
// console.log(this.$parent.$parent.$parent);
if (this.$parent.$parent.$parent.isEdit
|| this.$parent.$parent.$parent.isAssess
|| this.$parent.$parent.$parent.isRevise) {
this.show = true;
}
}
}
折腾了半天终于找到原因;把代码里边的 mouseleave 事件改写 onmouseout
老版本写法的代码
<div class=" biaConfirmHtmlSelect tempSeleceBox" v-else @mouseleave="updateShow">
<select @change="update" v-model="value">
改写后的写法
<div class=" biaConfirmHtmlSelect tempSeleceBox" v-else @onmouseout="updateShow">
<select @change="update" v-model="value">
那到底是怎么回事呢?猜测估计是事件冒泡搞得鬼!大家都知道常用的浏览器中有两种事件流:事件冒泡和事件捕获。让我们看一下事件冒泡的定义:事件按照从最特定的事件目标逐级向上传播到最不特定的事件目标(document对象)的顺序。所以说当鼠标移入移除A的子元素B的时候,B的mouseover事件和mouseout事件会触发,但是它自己没有这两个事件啊,就把这两个事件传递给了它的父元素A,A有这两个事件所以就发生了我们看到的情况。