Button元素在点击按钮文本并释放它时不触发click事件(但仍在按钮内)

Button element not firing click event when clicking on button text and releasing off it (but still inside the button)?

本文关键字：按钮 事件 click 元素 文本 Button 释放      更新时间：2023-09-26

在WebKit浏览器上(我在Mac上的Chrome和Safari上测试过)，button元素的行为很奇怪:

在此小提琴http://jsfiddle.net/5ReUn/3/中，您可以执行以下操作:

  1. 当光标在HTML按钮文本上时按下鼠标左键
  2. 移动光标(按下时)到按钮中没有文字的区域
  3. 释放鼠标按钮

则未触发button元素上的click事件!

HTML非常简单:

<button id="button">Click</button>

CSS一点也不复杂:

button {
    display: block;
    padding: 20px;
}

JS用于点击捕捉:

button = document.getElementById('button');
button.addEventListener('click', function() {
    console.log('click');
});

很多访问我网站的人抱怨按钮无法点击。他们没有意识到他们在点击时移动了光标。

有人找到解决这个问题的方法吗?

原来是WebKit的一个bug。

一个快速的非javascript解决方案是将文本包装在SPAN元素中，并使其通过点击:

<button>
    <span>Click Me</span>
</button>

CSS例子:

span {
    display: block;
    padding: 20px;
    pointer-events: none;   // < --- Solution!
}

由于该错误只出现在WebKit中，所以不支持pointer-events的浏览器可以忽略

如果您找不到其他解决方案，您可以使用mousedown事件代替click事件。

这不是最好的解决方案，因为它的行为与正常情况不同。通常情况下，用户期望当手指从鼠标按钮上松开时发生动作。

这里您试图拖动而不是单击它。因此，您可能想要尝试mousedown事件。

//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;
    }
});

jsfiddle

你可以在按钮周围添加一个div(像什么，20px?)与它绑定相同的js/jquery。这样，即使他们没有点击(哈哈)，脚本仍然会启动。然而，我注意到，如果你把鼠标从按钮上拖走，而它被按下，按钮不会做任何事情(不只是发生在你的页面上，即尝试它与facebook登录按钮，甚至在这个网站上的按钮)。

相关文章：