logo标签列表

当元素获得焦点并改变位置时，点击事件未触发。

javascriptevents
3
当一个元素有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键，我需要它向上或向下滚动。但我也需要处理点击事件。

有没有一种好的方法同时处理这两个事件？

1
点击事件会获得焦点，那为什么不在焦点事件中处理所有操作呢？ - undefined
你试过使用Bootstrap折叠面板吗？https://www.w3schools.com/bootstrap/bootstrap_collapse.asp - undefined
@Kramb，因为点击处理程序还有其他操作，所以当只是接收焦点时，我不需要它。 - undefined
1个回答
2

您可以使用mousedown事件代替click事件。它会在focus事件之前触发。

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接