「模糊」事件被無理觸發？

我有2個元素。第一個元素有一個blur事件，第二個元素有一個mousedown事件。第二個元素上的mousedown事件將焦點返回到第一個元素，但第一個元素上的blur由於某種原因而被觸發，即使第一個元素在第二個元素之前未被聚焦也是如此。「模糊」事件被無理觸發？

爲什麼會發生這種情況？這是（不知何故）所需的行爲，或者這是一種錯誤？

<!DOCTYPE html> 
<html> 
<head> 
<title>Bug?</title> 
</head> 
<body> 

<input type="text" /> 
<br /><br /> 
<button>Click me to focus on the input</button> 
<br /><br /> 
<input type="text" /> 

<script type="text/javascript"> 
    document.getElementsByTagName('input')[0].addEventListener('blur', function(e){ 
     console.log('blur', e); 
    }); 

    document.getElementsByTagName('button')[0].addEventListener('mousedown', function(e){ 
     console.log('mousedown', e); 

     document.getElementsByTagName('input')[0].focus(); 
    }); 
</script> 
</body> 
</html>

https://jsfiddle.net/rsh5aopg/

來源

2017-06-29 Chat Tor

我期待以下行爲：mousedown（專注於按鈕） - >函數更改焦點（專注於輸入） - > mouseup（專注於按鈕=>輸入模糊）。 – Edwin

@Edwin是正確的，或者看起來如此。出於興趣，你爲什麼使用'mousedown'而不是'click'？ – George

我不這麼認爲......鼠標點火/之後/模糊。這些事件以mousedown，blur，mouseup，click的順序點燃。我需要在模糊運行之前做一些事情，這就是爲什麼我使用mousedown而不是點擊。 https://stackoverflow.com/questions/22867022/onblur-vs-onclick-timing –

這是不是一個錯誤，事件順序是：

mousedown 
blur 
mouseup 
click

當你按下按鈕，觸發mousedown事件。在那個聆聽者中，你關注第一個輸入。當然，在mousedown事件之後，模糊事件發生了。這會消除第一個輸入的焦點，並且您會看到模糊偵聽器代碼執行。

您可以添加到e.preventDefault()鼠標按下事件，或者請使用mouseup或click那些既發生模糊了。無論哪種方式，第一個輸入將仍然有你想要的焦點。

來源

2017-06-29 12:38:11

無論確切的實現，我不明白的事情是，瀏覽器在鼠標懸停之後但在mouseup之前將焦點更改爲單擊的元素。這並不明顯，但經過一段時間的思考之後，重點/模糊應該一起發生是有道理的。此外，您的答案通過不讓瀏覽器專注於按鈕來解決此問題。謝謝 –

'e.stopPropagation（）'如果你想讓當前的事件正常工作，可以正常工作（把光標放在文本中，切換複選框等），只想停止其他事件發射。 –

「模糊」事件被無理觸發？

回答

相關問題