javascript 单击按钮文本并释放它（但仍在按钮内）时，按钮元素不会触发单击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15679787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Button element not firing click event when clicking on button text and releasing off it (but still inside the button)?
提问by Ernests Karlsons
On WebKit browsers (I tested on Chrome and Safari on Mac), button element behaves weird:
在 WebKit 浏览器上（我在 Mac 上的 Chrome 和 Safari 上测试过），按钮元素的行为很奇怪：
Wen in this fiddle http://jsfiddle.net/5ReUn/3/you do the following:
在这个小提琴http://jsfiddle.net/5ReUn/3/ 中，您执行以下操作：
- Press left mouse button while the cursor is over HTML button text
- Move the cursor (while pressed) to an area of the button without text
- Release the mouse button
- 当光标在 HTML 按钮文本上时按下鼠标左键
- 将光标（按下时）移动到没有文本的按钮区域
- 释放鼠标按钮
Then the click event on the button element is not fired!
然后按钮元素上的点击事件不会被触发！
HTML is very simple:
HTML非常简单：
<button id="button">Click</button>
And the CSS is not sophisticated at all:
CSS 一点也不复杂：
button {
display: block;
padding: 20px;
}
JS for click catching:
点击捕捉的JS：
button = document.getElementById('button');
button.addEventListener('click', function() {
console.log('click');
});
Many visitors to my site complain that buttons are not clickable. They don't realize they are moving the cursor while clicking.
我网站的许多访问者都抱怨按钮不可点击。他们没有意识到他们在单击时正在移动光标。
Has anybody found a workaround for this?
有没有人找到解决方法？
回答by Ernests Karlsons
It turns out to be a bug in WebKit.
结果证明是WebKit 中的一个错误。
An quick non-JavaScript solution is to wrap the text in a SPAN element and make it click-through:
一个快速的非 JavaScript 解决方案是将文本包装在 SPAN 元素中并使其点击：
<button>
<span>Click Me</span>
</button>
Example CSS:
示例 CSS：
span {
display: block;
padding: 20px;
pointer-events: none; // < --- Solution!
}
Since the bug appears only in WebKit, browsers that don't support pointer-eventscan be ignored.
由于该bug只出现在WebKit中，不支持的浏览器pointer-events可以忽略。
回答by Mr_Green
Here you are trying to draginstead of clicking it. So, you may want to try mousedownevent instead.
在这里，您尝试拖动而不是单击它。因此，您可能想尝试使用mousedownevent 代替。
//This is same as click event
var down = false;
var button = document.getElementById('button');
var info = document.getElementById('info')
button.addEventListener('mousedown', function() {
down = true;
});
button.addEventListener('mouseup', function() {
if(down){
info.innerHTML += "click ";
down = false;
}
});
回答by Johan
If you don't find another solution, you can use the mousedownevent instead of the clickevent.
如果找不到其他解决方案，则可以使用mousedown事件代替click事件。
This is not the best solution since it behaves different than normal. Normally the user is expecting the action to happen when the finger is released from the mouse button. Not when the finger is holding the mouse button down.
这不是最好的解决方案，因为它的行为与正常情况不同。通常，当手指从鼠标按钮上松开时，用户期望动作发生。不是当手指按住鼠标按钮时。
回答by Edwin Lambregts
You could add a div around the button (with like a margin of what, 20px?) with the same js/jquery bound to it. That way, if they would missclick(lol) the script would still fire. However, I noticed that indeed if you drag your mouse off the button while it's pressed, the button will not do anything (doesn't just happen on your page, i.e. try it with Facebook-login buttons or even the buttons on this website).
您可以在按钮周围添加一个 div（像边距一样，20 像素？）并绑定相同的 js/jquery。这样，如果他们会错过点击（大声笑）脚本仍然会触发。但是，我注意到确实如果您在按下按钮时将鼠标从按钮上拖开，该按钮将不会执行任何操作（不仅仅发生在您的页面上，即尝试使用 Facebook 登录按钮甚至本网站上的按钮） .
