点击事件不会触发元素，当有焦点时改变位置

问题描述：

当元素有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>

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

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

点击会给焦点，那么为什么不处理它所有的焦点事件？ – Kramb

你有没有试过手风琴引导..？ https://www.w3schools.com/bootstrap/bootstrap_collapse.asp –

@Kramb，因为点击处理程序做更多的事情，我不需要它，当只是接收焦点。 – aexieh

答

您可以使用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>

点击事件不会触发元素，当有焦点时改变位置

相关推荐