Question

当元素具有onFocus事件处理程序（更改元素的位置）时，onClick事件处理程序不会触发。这可能是因为点击事件实际上是mousedown和mouseup事件的组合。因此，首先mousedown触发，然后元素获得焦点，处理程序更改元素的位置。然后mouseup触发，但此时光标位于某个不同的元素上，并且不会调用单击处理程序。

以下是示例：

var container = document.getElementById('container');
var button = document.getElementById('button');
container.style.position = "absolute";
container.style.marginTop = "40px";
button.addEventListener('click', function() {
  alert('Clicked');
}, false);
button.addEventListener('focus', function() {
  container.style.top = (container.getBoundingClientRect().top - 10) + 'px';
  this.blur();
}, false);

<!DOCTYPE html>
<html>

<head>
  <title>ClickFocusIssue</title>
</head>

<body>
  <div id="container">
    <button id="button">Button</button>
  </div>
</body>

</html>

特别是，我有一个带有自定义滚动的可滚动表。当表格中的行获得焦点时，我需要它向上和向下滚动，例如使用 Tab 按钮。但我也需要处理点击。

有同时处理这两个事件的好方法吗？

Answer 1

您可以使用mousedown事件而不是点击。它将在焦点事件之前触发。

var container = document.getElementById('container');
var button = document.getElementById('button');
container.style.position = "absolute";
container.style.marginTop = "40px";
button.addEventListener('mousedown', function() {
  alert('Clicked');
}, false);
button.addEventListener('focus', function() {
  container.style.top = (container.getBoundingClientRect().top - 10) + 'px';
  this.blur();
}, false);

<!DOCTYPE html>
<html>

<head>
  <title>ClickFocusIssue</title>
</head>

<body>
  <div id="container">
    <button id="button">Button</button>
  </div>
</body>

</html>

点击事件不会针对具有焦点

1 个答案: