GWT - 点击事件未被触发

Question

GWT - 点击事件未被触发

3

我在一个表单中遇到了奇怪的问题。表单包含多个文本字段，其中带有内联验证，如果内容无效，则在字段下方显示错误消息。在失去焦点时触发验证。页面底部有一个“下一步”按钮。点击后执行验证，如果一切正常，则提交表单。现在，如果单击按钮时一个必填的空字段具有焦点，则会发生以下情况：

1. 触发onBlur并执行内联验证 2. 显示错误消息 3. 页面的其余部分“向下推”以显示错误文本 4. 不会触发按钮上的onClick操作

我最初认为onBlur会阻止onClick。然后我注意到当页面向下移动时，鼠标指针不再位于按钮上，因为按钮被向下推动了。如果我在足够低的位置单击按钮，使得“移动”后指针仍然在按钮上，则会触发onClick。我用onMouseDown替换了onClick，问题得到解决，但我对这种情况发生的原因感到困惑。

- algiogia

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Colin Alworth · Accepted Answer

“onClick”事件没有被触发是因为没有点击——点击是指在同一元素上进行的“mousedown”和“mouseup”操作。如果鼠标不再停留在同一元素上，浏览器就不能认为这是一个点击——我相信在某些情况下甚至会失败（尝试单击链接并移动鼠标，看看它是否仍然跟随链接），但至少在我的测试中，用鼠标滚动仍然保持为点击，如果你向后滚动。

从http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents：

当指针设备按钮在元素上被点击时，会发生单击事件。单击被定义为在相同的屏幕位置上按下和松开鼠标。

在您的情况下，当鼠标不移动时，“单击”不会发生在“一个”元素上，或者如果鼠标下只有一个元素，则是body元素，而不是您想要的元素。

至于修复此问题，您有几个选项：

不要在鼠标按下时滚动页面——无论用户点击的是什么，这都几乎肯定会让用户感到困惑/惊讶
不要要求点击事件，而是使用 mousedown（听起来你现在正在这样做）
缓慢滚动到新位置，可能带有延迟和动画滚动，以便快速点击不受影响。但请记住，按钮应该对点击作出响应，允许用户按住鼠标并在释放之前可能改变主意。