點擊事件不會觸發元素，當有焦點時改變位置

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

特別是，我有一個自定義滾動可滾動表。當表格中的行獲得焦點時，我需要它上下滾動，例如與標籤按鈕。但我也需要處理點擊。

有沒有同時處理兩個事件的好方法？

來源

2017-10-18 aexieh

點擊會給焦點，那麼爲什麼不處理它所有的焦點事件？ – 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>

來源

2017-10-18 15:16:12 RogerC

點擊事件不會觸發元素，當有焦點時改變位置

回答

相關問題