GWT-未触发onClick [英] GWT - onClick not triggered
问题描述
我在表单上的行为很奇怪.
I'm having a really weird behaviour on a form.
有许多带有在线验证的文本字段，如果内容无效，则在该字段下方显示错误消息.验证是在模糊时触发的.
There is a number of text fields with in-line validation, showing an error message below the field if the content is invalid. The validation is triggered on blur.
页面底部有一个下一步"按钮.点击后，将执行验证，如果一切正常，将提交表单.
At the bottom of the page there is a "Next" button. On click, a validation is performed and, if everything is ok, the form is submitted.
现在，如果当我单击按钮时强制性的空白字段具有焦点，则会发生以下情况:
Now, if a mandatory, empty field has focus when I click the button the following happens:
- onBlur被触发并执行在线验证
- 显示错误消息
- 页面的其余部分被按下"以显示错误文本
- 按钮上的onClick操作未触发
我最初以为onBlur某种程度上阻止了onClick.然后我注意到，当页面向下移动时，按下鼠标按钮时，鼠标指针不再位于该按钮上.如果我在足够低的位置单击按钮，以使指针移动"后仍在按钮上，则会触发onClick.
I initially thought that onBlur was somehow preventing onClick. Then I've noticed that when the page moves down, the mouse pointer is no more ON the button as this is pushed down. If I click on the button in a low enough position, such that after the "moving" the pointer is still on the button, onClick is triggered.
我用onMouseDown代替了onClick，问题已解决，但是我真的对这种情况的发生感到困惑.
I replaced the onClick with onMouseDown and the problem is fixed, but I am really puzzled by the reason this happens.
推荐答案
onClick不会触发，因为没有点击-点击是mousedown然后是mouseup元素.如果鼠标不再位于同一元素上，那么浏览器就不能认为它是单击-我相信在某些情况下，即使鼠标移动了，鼠标单击还是会失败(尝试链接并移动鼠标，看看是否仍然如此)请点击链接)，不过至少在我的测试中，如果向下滚动鼠标，仍然可以将其保持为单击状态.
The onClick doesn't trigger because there hasn't been a click - a click is a mousedown followed by a mouseup on the same element. If the mouse is no longer over the same element, the browser can't consider it to be a click - I believe this even fails to become in some cases when the mouse moves (try a link and move the mouse, see if it still follows the link), though at least in my testing scrolling with the mouse down still keeps it as a click if you scroll back.
来自 http://www .w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mouseevents :
在元素上单击定点设备按钮时，将发生click事件.点击的定义是在同一屏幕位置上按下鼠标并向上拖动.
The click event occurs when the pointing device button is clicked over an element. A click is defined as a mousedown and mouseup over the same screen location.
在您的情况下，当鼠标不移动时，不会在一个"元素上发生点击"，或者如果鼠标下面只有一个元素，则它是body元素，而不是您所拥有的
In your case, while the mouse is not moving, the 'click' isn't occurring over 'an' element, or if there is just one element under the mouse, its the body element, and not what you had in mind.
至于解决此问题，您有几种选择:
As far as fixing this, you have several options:
- 在鼠标按下时不要滚动页面-几乎可以肯定，无论用户单击什么，这都会使用户感到困惑/惊奇
- 不需要click事件，而是使用鼠标按下(听起来像您现在正在做的事情)
- 缓慢地滚动到新位置，可能会有所延迟并带有动画滚动，以使快速单击不会受到影响.但是请记住，应该设置按钮来响应单击，从而允许用户按住鼠标并在释放鼠标之前将鼠标移开可能会改变主意.
- Don't scroll the page away while the mouse is down - this is almost certainly confusing/surprising to the user no matter what they were clicking on
- Don't require a click event, but use a mousedown (as it sounds like you are doing now)
- Slowly scroll to the new location, perhaps with a delay and an animated scroll so that a quick click would not be affected. Keep in mind however that buttons are supposed to respond to clicks, allowing the user to hold the mouse down and potentially change their mind by moving the mouseaway before they release.
这篇关于GWT-未触发onClick的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
