onblur - 如何判斷點擊的內容;或如何判斷一個onclick事件正在等待運行

在下面的代碼，是有辦法blurredByClickOnLink設置爲正確的值（不使用鼠標懸停或其他鼠標事件點擊發生之前設置的東西）？如果用戶通過單擊鏈接模糊了文本框，則該屬性爲true;如果用戶通過Tab鍵或單擊其他任何位置來模糊文本框，則爲false。感謝您看一看！onblur - 如何判斷點擊的內容;或如何判斷一個onclick事件正在等待運行

<html> 
<body> 
<input id="myInput" type="text" onblur="var blurredByClickOnLink='???'; console.log('input onblur. blurred by click on link = ' + blurredByClickOnLink);" /> 
<br/><br/> 
<a id="myLink" href="javascript:console.log('a href');void(0);" onclick="console.log('a onclick');">Link</a> 
</body> 
</html>

來源

2014-12-04 Kwateco

當一個事件發生在DOM上時，該事件本質上是「原子」的。這意味着事件將從事件隊列中處理，並且只有這樣才能處理下一個事件。這些事件不以任何方式「組合」在一起。

當你輸入元素失去焦點，這將在其觸發blur事件。此時，您現在可以提出有關blur的問題。但是在其他環境中不會有任何其他狀態變化。接下來可能會點擊link元素，這也會導致事件觸發。在這種情況下，鏈接上的點擊事件。由於這些事件一個接一個發生......首先模糊輸入，然後...稍後...點擊鏈接，您無法知道模糊發生的時間，接下來發生的事情將是點擊在鏈接上，因爲它還沒有發生。

一種可能的解決辦法是設置一個短定時器的輸入的模糊。這個計時器可以觸發另一個功能（比如100msecs），然後問這個問題..是鏈接點擊？

這可能足以滿足您的困擾。

它幫助我去思考這些問題的方法是可視化的請求隊列（在一個盒子），該瀏覽器在處理一個接一個來改變DOM的狀態。問問自己「當我處理一個請求時，我有什麼需要作出決定嗎？」

來源

2014-12-04 15:18:00 Kolban

謝謝！所以這聽起來像我想要的（關於模糊事件中即將發生的點擊事件的信息）無法完成，因爲模糊事件知道的事情迄今爲止還沒有被點擊。我能夠使用setTimeout（在任一元素的單擊事件中）來完成所需的行爲。我不熟悉的事件隊列是如何工作的，但聽起來好像是沒有辦法在模糊事件中的代碼，以確定哪些是在事件隊列？ – Kwateco 2014-12-04 23:00:35

這就是它。想象一下使用高速攝像頭拍攝瀏覽器的交互。當您將鼠標移出輸入字段時，會發生模糊事件，並且可能會在發生任何後續事件（如點擊）之前處理。 – Kolban 2014-12-05 00:02:36

我認爲比我最初提出的問題更好的問題是：如何判斷一個onblur事件是否正在等待onmousedown正在運行。與模糊和點擊不同，mousedown和blur同時發生，但mousedown事件首先運行。因此，對於一個更好的問題的具體例子：在這個小提琴中 - http://jsfiddle.net/85r4vfqg/14/ - 可以將變量listOfBlurEventsWaitingToRun填入更有用的東西，特別是如果有多個元素會發生模糊事件？而不看activeElement？可以直接查看「事件隊列」嗎？ – Kwateco 2014-12-24 14:49:42

onblur - 如何判斷點擊的內容;或如何判斷一個onclick事件正在等待運行

回答

相關問題