我在表单上有一个非常奇怪的行为。
有许多文本字段具有内联验证功能，如果内容无效，则在字段下方显示错误消息。验证在模糊时触发。
在页面底部有一个"下一步"按钮。单击时，将执行验证，如果一切正常，则提交表单。
现在，如果我单击按钮时必填的空字段具有焦点，则会发生以下情况：
- 触发 onBlur 并执行内联验证
- 显示错误消息
- 页面的其余部分被"下推"以显示错误文本
- 按钮上的单击操作未触发
我最初认为onBlur以某种方式阻止了onClick。然后我注意到，当页面向下移动时，鼠标指针不再在按钮上，因为它被按下。如果我在足够低的位置单击按钮，以便在"移动"后指针仍在按钮上，则会触发onClick。
我用onMouseDown替换了onClick，问题已经解决，但我对发生这种情况的原因感到非常困惑。
onClick不会触发，因为没有单击-单击是同一元素的mousedown后跟mouseup。如果鼠标不再在同一元素上，浏览器不能将其视为单击-我相信在某些情况下，当鼠标移动时，这甚至无法成为（尝试链接并移动鼠标，看看它是否仍然跟随链接），尽管至少在我的测试中，如果您向后滚动，鼠标向下滚动仍然将其保留为单击。
从 http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents：
单击元素上时，将发生单击事件。单击定义为鼠标按下和鼠标向上停留在同一屏幕位置上。
在您的情况下，当鼠标不移动时，"单击"不会发生在"一个"元素上，或者如果鼠标下方只有一个元素，那就是正文元素，而不是您想到的元素。
就解决此问题而言，您有几种选择：
- 不要在鼠标向下时滚动页面 - 这几乎肯定会让用户感到困惑/惊讶，无论他们点击什么
- 不需要点击事件，但使用鼠标按下（听起来就像你现在正在做的那样）
- 慢慢滚动到新位置，也许有延迟和动画滚动，这样快速单击就不会受到影响。但请记住，按钮应该响应单击，允许用户按住鼠标，并可能通过在释放之前将鼠标移开来改变主意。