Demo fiddle 的

Question

我有一个这样的简单按钮：

<a class="button" href="javascript:void(0);" onclick="submitActivity();">Add</a>

我也尝试过：

<a class="button" href="javascript:submitActivity();">Add</a>

在这两种情况下，如果鼠标在mousedown和mouseup之间移动了一定量的像素，它就不会注册点击。这可能会导致用户认为他们没有提交信息

这种情况发生在Chrome中。尚未测试其他浏览器。

无论您点击并释放按钮的位置，我都希望触发事件。

编辑：在Firefox中也发生了同样的事情，但在视觉上看起来我正在拖动链接。这种方式至少对用户没有提交是有意义的，但在Chrome中没有这样的可视指示器。

Answer 1

点击被定义为“按住鼠标按钮，然后放开鼠标按钮。”它是在同一元素上执行的鼠标按下和鼠标按下事件的组合。如果用户离开元素，他们就不再执行点击，只是mousedown（还有mouseout，然后是不同元素上的mouseup）。

这是标准的，直观的行为。用户不希望他们的点击“重要”，除非他们放弃鼠标而不移动。

如果对于您的应用程序来说，这个提交对您来说非常重要，那么请不要使用onclick，请使用onmousedown。

<a class="button" href="javascript:void(0);" onmousedown="submitActivity();">Add</a>

编辑：误解了你的问题。也许我习惯的这种语法对你有用：

 <INPUT type="button" value="Add" name="add_button" onClick="submitActivity()">

Answer 2

Demo fiddle 的

<a class="button" href="javascript:void(0);" onMouseDown="submitActivity();">Add</a>

Answer 3

解决方法是在onmousedown上执行preventDefault（）。

$(".button").mousedown(function(event){
    event.preventDefault();
    return false;
});

Answer 4

我在另一个背景下偶然发现了同样的问题。我使用 divs 和onclick =＆＃34; ...＆＃34;并将子divs 放入按钮文本和图标中。当将光标移动到mousedown和mouseup之间的子div上的一个像素时，父div生成了一个mouseout事件，该事件阻止了click事件被触发。我找不到禁用mouseout事件的方法，但找到了解决此问题的简单CSS解决方案。只需禁用所有子项的指针事件：

.buttondiv * {
    pointer-events: none; /* prevent click problems in buttons containing child divs */
}

如果移动鼠标，onClick事件不会触发

4 个答案:

Demo fiddle 的