解决两个div切换显示；鼠标还未离开另一个容器消失，没法操作选择问题；

原创已于 2023-04-13 17:26:56 修改 · 360 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html

于 2023-04-13 17:26:17 首次发布

文章描述了一个在Vue.js应用中，两个div切换显示的场景，其中一个用于数据显示，另一个用于选择数据。初始默认显示第一个div，选择时切换到第二个div。问题在于鼠标离开第二个div时，它过早地隐藏了，导致无法选择数据。解决方案是将`mouseleave`事件替换为`onmouseout`，以防止事件冒泡导致的提前隐藏。这与事件冒泡机制有关，当鼠标移出子元素时，事件会传播到父元素，导致父元素的事件触发。

一、问题描述：
两个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有这两个事件所以就发生了我们看到的情况。