分配给父 div 的事件侦听器在按钮上停止答案

【问题标题】：Event Listener assigned to parent div stops on button分配给父 div 的事件侦听器在按钮上停止
【发布时间】：2020-09-05 21:29:37
【问题描述】：

我有一个要登录的按钮列表，并希望为它们分配一个事件侦听器以实现 p5.js 悬停效果。我想将它分配给包装器，但是在按钮之间切换时，它不会检测到悬停。

我也在使用 Vue.js v2.6.11

<div class="main">
    <div class="google hover">
        <button @click="loginWithProvider('google')">
            Login with Google
        </button>
    </div>
    <div class="twitter hover">
        <button @click="loginWithProvider('twitter')">
            Login with Twitter
        </button>
    </div>
    <div class="github hover">
        <button @click="loginWithProvider('github')">
            Login with GitHub
        </button>
    </div>
</div>

以及事件监听器：

第一个版本

const main = document.querySelector('.main');
main.addEventListener('mouseenter', () => {
    isHovered = true;
});
main.addEventListener('mouseout', () => {
    isHovered = false;
});

第二版：

const buttons = document.querySelectorAll('.hover');

buttons.forEach(button => {
    button.addEventListener('mouseenter', () => {
        isHovered = true;
    });
});
buttons.forEach(button => {
    button.addEventListener('mouseout', () => {
        isHovered = false;
    });
});

两者的效果相同。输入，但是一旦我停止将鼠标悬停在一个按钮上并转到另一个按钮（留在父级div，mouseout 被触发并且没有再次输入其他按钮（除非我离开父级div）

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/Element/… 好吧，就您的第一个 sn-p 而言，mouseenter 事件不会冒泡。因此，从这个意义上说，将事件侦听器放在父 main 上是有问题的。
嗯，我想到了。但是为什么当我为每个按钮添加一个监听器时它不起作用呢？当然它应该这样工作......

标签： javascript html css vue.js vue-component

【解决方案1】：

事实证明，添加边距会触发 mouseenter 和 mouseout 事件。我刚刚添加了一个这样的间隔 div：

<div class="main">
    <div class="google hover">
        <button @click="loginWithProvider('google')">
            <i class="fab fa-google"></i>
            Login with Google
        </button>
    </div>
    <div class="spacer"></div>
    <div class="twitter hover">
        <button @click="loginWithProvider('twitter')">
            <i class="fab fa-twitter"></i>
            Login with Twitter
        </button>
    </div>
    <div class="spacer"></div>
    <div class="github hover">
        <button @click="loginWithProvider('github')">
            <i class="fab fa-github"></i>
            Login with GitHub
        </button>
    </div>
</div>

并编辑了我的 css：

// Removed
.button {
  margin-buttom: 10px;
}

// Added
.spacer {
  height: 10px;
}

【讨论】：

【解决方案2】：

首先我认为最好用 v-for 渲染按钮，而不是像这里那样手动渲染按钮，然后你可以使用 Vue 中的事件，并将它们用于悬停事件：

<div class="main">
    <div 
        v-for="(item,i) in loginList"
        :key="'login-list-' + i"
        :class="item.class"
        @mouseenter="hoverEntered"
        @mouseleave="hoverLeaved"
    >
        <button @click="loginWithProvider(item.provider)">
            <i :class="item.icon"></i>
            {{ item.text}}
        </button>
    </div>
</div>

Vue 代码如下所示：

data: () => ({
    isHovered: false,
    loginList: [
        {
            class: 'twitter hover',
            icon: 'fab fa-twitter',
            text: 'Login with twitter',
            provider: 'twitter'
        },
        {
            class: 'github hover',
            icon: 'fab fa-github',
            text: 'Login with github',
            provider: 'github'
        },
        {
            class: 'google hover',
            icon: 'fab fa-google',
            text: 'Login with google',
            provider: 'google'
        }
    ]
}),
methods: {
    hoverEntered() {
        this.isHovered = true; //isHovered = true; if u need non Vue var
    },
    hoverLeaved() {
        this.isHovered = false; //isHovered = true; if u need non Vue var
    }
}

因此，您将拥有更少的非 Vue 代码，并且更可预测。

【讨论】：