Codesandbox:https ://codesandbox.io/s/vue-template-33327
重现步骤
- 点击 vue-multiselect 显示选项面板
- 选择几个选项
- 单击“不可点击的提交”按钮
- 观察奇怪的行为
正如我们所见,“不可点击的提交”按钮是不可点击的。只有当 vue-multiselect 失去焦点时才可点击(选项面板消失后)
有人可能会说,选项面板的出现导致按钮“不可点击”,然而,尽管选项面板仍然存在,但“可点击提交”按钮仍然是“可点击”的。
其他人可能会这样说,因为“不可点击提交”按钮从其先前位置移开导致点击事件处理程序不起作用。这就说得通了。但是,我还创建了一个增加高度按钮,它使 div 增加它的高度,以模拟按钮的位置变化。在这种情况下,“不可点击的提交”是可点击的..奇怪!
另一个奇怪的事情是@mousedown 事件在“不可点击提交”按钮的情况下起作用。但是,在这种情况下,表单没有提交。
这种奇怪的行为完全让我大吃一惊。我不知道是什么导致了这些行为。有谁知道怎么回事,求大神帮忙!因为归根结底,我需要将“不可点击的提交”按钮设为Clickable。
更新 1
另一个问题,为什么@mousedown
事件有效但@click
事件没有?
更新 2
然而,防止按钮移动解决了这个问题,是否有可能使按钮仍然可以点击,尽管它已经离开了之前的位置?