按钮元素在单击按钮文本并释放它时（但仍在按钮内）时不触发单击事件？

问题描述

在WebKit浏览器上（我在Mac上测试Chrome和Safari），按钮元素表现得很奇怪：

On WebKit browsers (I tested on Chrome and Safari on Mac), button element behaves weird:

这个小提琴中的文您执行以下操作：

Wen in this fiddle http://jsfiddle.net/5ReUn/3/ you do the following:

1. 当光标悬停在HTML按钮文本上时按鼠标左键


2. 将光标（按下时）移动到按钮区域，不带文字


3. 释放鼠标按钮

然后按钮元素上的click事件不会被触发！

Then the click event on the button element is not fired!

HTML非常简单：

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

CSS根本不复杂：

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

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?

推荐答案

原来是。

一个快速的非JavaScript解决方案是将文本包装在SPAN元素中并使其点击：

An quick non-JavaScript solution is to wrap the text in a SPAN element and make it click-through:

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

CSS示例：

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

由于该错误仅出现在WebKit中，因此不支持<$的浏览器c $ c>指针事件可以忽略。

Since the bug appears only in WebKit, browsers that don't support pointer-events can be ignored.

这篇关于按钮元素在单击按钮文本并释放它时（但仍在按钮内）时不触发单击事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！