Javascript 防止div内带有click事件的按钮和mouseover事件

我有一个div，有一个mouseenter事件。在该div中有一个带有click事件的按钮。这个想法是用户将鼠标悬停在div上，在mouseenter事件中，div变为“活动”。如果div处于活动状态，则该按钮可见并可单击

桌面上的一切似乎都很好。但是，在移动设备上，由于鼠标输入事件的原因，如果在非活动div上单击按钮应显示的位置，则会单击该按钮

我想防止用户在认为正在单击div使其处于“活动”状态时意外单击该按钮。我假设这可以通过事件处理来完成，但我一辈子都无法解决

请参阅下面的代码笔或代码

请注意：如果您在桌面上测试并单击按钮，您仍然会收到“错误单击”错误消息。此代码笔用于mobile view，但我不确定是否可以强制它在mobile中显示我的问题？

<div id="app">
  <div class="container mx-auto">
    <div class="flex -mx-2">
      <div class="w-1/2 px-2" @mouseenter="activate(key)" v-for="(item, key) in items" :key="key">
        <div class="h-full p-5 rounded-lg" :class="[ active === key ? 'bg-yellow-500' : 'bg-gray-300']">
          <div class="mb-10">
            <p>{{ item.name }}</p>
          </div>

          <button class="bg-red-500 px-3 py-2 rounded" @click="alert('I\'ve been clicked by mistake')" v-if="active === key">Activate Me</button>
        </div>
      </div>
    </div>
  </div>
</div>

---

如果我正确理解了你的问题，听起来你需要这样做：

<button @click.prevent.stop="handleClick(key)">Activate me</button>

// Methods:
handleClick(key) {
  if (this.active !== key) {
    this.active = key;
  } else {
    // Do whatever the button should do here
  }
}

activate(key) {
  setTimeout(() => this.active = key, 50);
}

更新2:

这里有一个替代解决方案-将其添加到父div：

@touchstart.prevent=“handleTouchStart（$event，key）”

然后在你的方法中：

handleTouchStart($event, key) {
  if (this.active === key) {
    $event.target.click();
  } else {
    this.active = key;
  }
}

---

这样做的目的是，当在父div上注册

touchStart

事件时，如果该事件当前未处于“活动”状态，则该事件将被取消，但该div将处于活动状态。如果当前处于活动状态，则允许单击事件正常进行。

感谢您的回复！div中的按钮不负责激活父div。mouseenter事件将div设置为活动。按钮只会发出一个事件，但在本例中，它只会触发一个警报。从我所看到的问题是，mouseenter事件触发正确，但奇怪的是，用v-if隐藏的按钮也在被单击，尽管在初次单击时，它不应该是可见的。因此，就好像是在呈现v-if之前发生了单击。不用担心！我现在更明白了——我已经用一个可能的解决方案更新了我的答案。我的直觉是在这里也使用事件修饰符，但这似乎并不能解决

mouseenter

如何在点击时触发的问题。太好了，谢谢！这是可行的，一点延迟也不明显。在这个场景中，我会使用@mouseenter吗？我想保留你的@mouseenter事件，因为似乎没有其他方法可以在桌面上获得你想要的效果。我添加了另一个更新，它的解决方案不涉及

setTimeout

。

handleTouchStart($event, key) {
  if (this.active === key) {
    $event.target.click();
  } else {
    this.active = key;
  }
}