英文:
Clicking edge of button is broken in Chrome & Firefox
问题
在Chrome和Firefox上，单击按钮的边缘会出现奇怪的行为：
CSS的活动状态被触发，但JavaScript的onclick事件没有被触发。只有在按钮的极边缘才会触发。
我尝试更改按钮的边框宽度（无边框和较粗的边框），但没有任何区别。
这在Chrome、Firefox和Opera中发生。但在Safari中没有。我没有测试Edge或IE。
以下是用于测试的确切代码：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
button:active {
transform: scale(.9);
}
英文:
On Chrome and Firefox, clicking the edge of a button gives odd behavior:
The CSS active state is triggered, but not the JavaScript onclick event. Only at the VERY EDGE of the button.
I tried changing the button border-width (no border and also a thick border). No difference.
It happens in Chrome, Firefox, & Opera. But not in Safari. I haven't tested Edge or IE.
Here is the exact code used to test this:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
<!-- language: lang-css -->
button:active {
transform: scale(.9);
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
</body>
</html>
<!-- end snippet -->
答案1
得分: 1
CSS状态在鼠标按下时更改。但是要注册点击事件，需要同时按下鼠标和释放鼠标按钮。如果我在按钮上按下鼠标，然后将鼠标移出按钮并释放，你会看到样式效果，但不会注册点击事件。
因为使用了scale(.9)，所以在鼠标在按钮边缘附近按下时，鼠标指针在释放鼠标按钮时不再位于按钮上。
英文:
The CSS state is changed on mouse down. However to register the click, both mouse down and mouse up needs to be on the button. If I do a mouse down on the button, then move the mouse outside and let go, you see that style effect, but no click event is registered.
Because of the scale(.9), the mouse pointer is no longer over the button on mouse up when pressing near the edge.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论