onselect 與 onselectstart 的區別

onselect 與 onselectstart 都屬於 JavaScript 當中的 DOM 事件，因爲它們兩者的拼寫比較類似，因此最初使用時弄混了兩個事件的效果，在此作一個簡單的記錄。

背景

以前在公司的前端項目中，本身寫了一個基於 jquery 的分頁器，在測試的時候發現了一個問題：當鼠標連續快速點擊【下一頁】按鈕的時候，會將按鈕上的文字選中，變成藍色，體驗不是很好。由於當時知道有一個事件是能夠控制元素文字是否容許被選中的，可是忘記了怎麼用的，因而上網搜索了一番。第一次錯將 onselect 事件當成了實現這個效果的事件，試過以後發現無論用，繼續研究發現其實應該是用 onselectstart 事件來進行控制。

兩者的區別

• onselect 事件會在文本框中的文本被選中時發生

• 支持該事件的 HTML 標籤：<input type="text">，<textarea>

• 支持該事件的 JavaScript 對象：window

• 使用舉例：

<input type="text" value="Hello world!" onselect="alert('你已經選中了文字！')" />

即當鼠標的左鍵劃過並選中了 input 輸入框中的內容時，就會觸發 onselect 事件。

• onselectstart 觸發時間爲目標對象被開始選中時（即選中動做剛開始，還沒有實質性被選中）

• onselectstart 幾乎能夠用於全部對象

• 注意：onselectstart 事件不被 input 和 textarea 標籤支持

• 使用舉例（非 Firefox 瀏覽器下）：

<div onselectstart="return false;">我不能被鼠標選中哦</div>

• Firefox 不支持上面這樣的使用方式，在 Firefox 瀏覽器下能夠經過設置 CSS 樣式來達到相同的效果

div { -moz-user-select: none; }

即 onselectstart 事件纔是用來實現元素內文本不被選中的正確方法。