GWT - onClick未触发

Question

我在表单上有一种非常奇怪的行为。

有许多带有内联验证的文本字段，如果内容无效，则会在字段下方显示错误消息。验证是在模糊时触发的。

在页面底部有一个“下一步”按钮。点击后，将执行验证，如果一切正常，则提交表单。

现在，如果强制的空字段在我单击按钮时具有焦点，则会发生以下情况：

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

我最初认为onBlur在某种程度上阻止了onClick。然后我注意到当页面向下移动时，鼠标指针不再按下按钮，因为它被按下了。如果我在足够低的位置点击按钮，那么在“移动”指针仍然在按钮上之后，触发onClick。

我用onMouseDown取代了onClick，问题得到解决，但我对这种情况的原因感到很困惑。

Answer 1

onClick没有触发，因为没有点击 - 点击是mousedown后跟同一元素上的mouseup。如果鼠标不再在同一个元素上，浏览器就不能认为它是一个点击 - 我相信这在某些情况下甚至无法在鼠标移动时出现（尝试链接并移动鼠标，看看它是否仍然跟随链接），但至少在我的测试中，如果向后滚动，用鼠标向下滚动仍然会保持点击状态。

---

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

  

单击元素上的指针设备按钮时，会发生单击事件。单击被定义为同一屏幕位置上的mousedown和mouseup。

在你的情况下，当鼠标没有移动时，“点击”不会发生在'an'元素上，或者鼠标下面只有一个元素，它是body元素，而不是你所拥有的元素心。

就修复此问题而言，您有以下几种选择：

• 鼠标停止时不要滚动页面 - 无论用户点击什么，这几乎肯定会令用户感到困惑/惊讶
• 不要求点击事件，但请使用mousedown（因为它听起来就像你现在所做的那样）
• 慢慢滚动到新位置，可能会有延迟和动画滚动，以便快速点击不会受到影响。但请记住，按钮假定以响应点击，允许用户按住鼠标并可能通过在释放之前移动鼠标来改变他们的想法。