爲什麼選擇帶值的輸入會激發鉻中的兩個事件？

以下代碼火災只是一個事件測試本當我按下選擇按鈕：

<script> 
    window.addEventListener('select', function(ev) { 
     console.log(ev, ev.timeStamp); 
    }); 
</script> 
<input type="text"><button onclick="document.querySelector('input').select()">select</button>

但是，如果我的值添加到輸入類型=文字，我得到兩個事件和事件之間唯一改變的是timestamp屬性：

<script> 
    window.addEventListener('select', function(ev) { 
    console.log(ev, ev.timeStamp); 
    }); 
</script> 
<input type="text" value="test"><button onclick="document.querySelector('input').select()">select</button>

有誰知道爲什麼這發生了，它背後的理由是什麼？

來源

2015-07-13 noreflow

自從您發佈該問題以來，一直試圖找出這一點。感覺它可能是一個瀏覽器bug ... –

也許與這個問題有關https://stackoverflow.com/questions/31265907/make-select-on-input-field-not-copy-to-clipboard-in-鉻在Linux上，它似乎也會複製，當你選擇當前緩衝區到主緩衝區，並發現這種奇怪的行爲與兩個事件，而試圖使輸入不復制第一次選擇，但只有雙擊。感謝您查看這個！ – noreflow

我認爲發生的事情是有兩種類型的select event被解僱，但由於Event對象具有有限的一組細節，它們看起來完全一樣。但看起來有一個select事件在您更改輸入的selectionRange時觸發，並且一個選擇事件在實際文本選擇更改時觸發（在此情況下，因爲選擇更改導致焦點在輸入上激活）。最後一個是當輸入爲空時沒有被觸發的那個 - 因爲沒有文本，文本選擇沒有改變。

您可以通過將select()放在mousedown上來分解它。由於它出現在按鈕上的mousedown上，焦點不在輸入上，而是停留在按鈕上。但是一個事件被解僱了。然後，例如，如果您僅在mouseup上添加focus()，則不會更改輸入的selectionRange，但會選擇實際文本並觸發選擇事件。或者，如果在您的點擊處理程序中調用select（），然後在按鈕上調用focus（），則只會有一個事件。你可以在這裏看到這些行爲：

https://jsfiddle.net/k292po9a/6/

話雖這麼說，那肯定的樣子，應該是Chrome處理一個bug，因此只有一個事件。

來源

2015-07-13 16:43:13

爲什麼選擇帶值的輸入會激發鉻中的兩個事件？

回答

相關問題