0

Codesandbox:https ://codesandbox.io/s/vue-template-33327

重现步骤

  1. 点击 vue-multiselect 显示选项面板
  2. 选择几个选项
  3. 单击“不可点击的提交”按钮
  4. 观察奇怪的行为

正如我们所见,“不可点击的提交”按钮是不可点击的。只有当 vue-multiselect 失去焦点时才可点击(选项面板消失后)

有人可能会说,选项面板的出现导致按钮“不可点击”,然而,尽管选项面板仍然存在,但“可点击提交”按钮仍然是“可点击”的。

其他人可能会这样说,因为“不可点击提交”按钮从其先前位置移开导致点击事件处理程序不起作用。这就说得通了。但是,我还创建了一个增加高度按钮,它使 div 增加它的高度,以模拟按钮的位置变化。在这种情况下,“不可点击的提交”是可点击的..奇怪!

另一个奇怪的事情是@mousedown 事件在“不可点击提交”按钮的情况下起作用。但是,在这种情况下,表单没有提交。

这种奇怪的行为完全让我大吃一惊。我不知道是什么导致了这些行为。有谁知道怎么回事,求大神帮忙!因为归根结底,我需要将“不可点击的提交”按钮设为Clickable

更新 1

另一个问题,为什么@mousedown事件有效但@click事件没有?

更新 2

然而,防止按钮移动解决了这个问题,是否有可能使按钮仍然可以点击,尽管它已经离开了之前的位置?


在此处输入图像描述

4

1 回答 1

0

答案比我想象的要简单,我只需要添加这一行:

@mousedown.prevent

到遇到问题的任何按钮。虽然我不知道到底发生了什么。

于 2019-09-13T04:20:30.690 回答