摘要:與都屬于當中的事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單的記錄。第一次錯將事件當成了實現這個效果的事件,試過之后發現不管用,繼續研究發現其實應該是用事件來進行控制。
onselect 與 onselectstart 都屬于 JavaScript 當中的 DOM 事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單的記錄。
背景之前在公司的前端項目中,自己寫了一個基于 jquery 的分頁器,在測試的時候發現了一個問題:當鼠標連續快速點擊【下一頁】按鈕的時候,會將按鈕上的文字選中,變成藍色,體驗不是很好。因為當時知道有一個事件是可以控制元素文字是否允許被選中的,但是忘記了怎么用的,于是上網搜索了一番。第一次錯將 onselect 事件當成了實現這個效果的事件,試過之后發現不管用,繼續研究發現其實應該是用 onselectstart 事件來進行控制。
二者的區別onselect 事件會在文本框中的文本被選中時發生
支持該事件的 HTML 標簽:,
支持該事件的 JavaScript 對象:window
使用舉例:
即當鼠標的左鍵劃過并選中了 input 輸入框中的內容時,就會觸發 onselect 事件。
onselectstart 觸發時間為目標對象被開始選中時(即選中動作剛開始,尚未實質性被選中)
onselectstart 幾乎可以用于所有對象
注意:onselectstart 事件不被 input 和 textarea 標簽支持
使用舉例(非 Firefox 瀏覽器下):
我不能被鼠標選中哦
Firefox 不支持上面這樣的使用方式,在 Firefox 瀏覽器下可以通過設置 CSS 樣式來達到相同的效果
div { -moz-user-select: none; }
即 onselectstart 事件才是用來實現元素內文本不被選中的正確方法。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/79902.html
摘要:與都屬于當中的事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單的記錄。第一次錯將事件當成了實現這個效果的事件,試過之后發現不管用,繼續研究發現其實應該是用事件來進行控制。 onselect 與 onselectstart 都屬于 JavaScript 當中的 DOM 事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單...
摘要:背景有一塊元素包含一段內容想要利用選中那塊元素下的的區間同時我又不想選中以外的內容默認情況下會將整個頁面可以選中的內容選中我想被選中實踐我想被選中我也想被選中原理利用屬性讓元素擁有控件自帶的類似輸入特性那么使用或就會給你選中里面的文本元素由 背景 有一塊div元素包含一段內容, 想要利用 CTRL+A 選中那塊div元素下的的區間. 同時我又不想選中 div以外的內容, 默認情況下會將...
摘要:背景有一塊元素包含一段內容想要利用選中那塊元素下的的區間同時我又不想選中以外的內容默認情況下會將整個頁面可以選中的內容選中我想被選中實踐我想被選中我也想被選中原理利用屬性讓元素擁有控件自帶的類似輸入特性那么使用或就會給你選中里面的文本元素由 背景 有一塊div元素包含一段內容, 想要利用 CTRL+A 選中那塊div元素下的的區間. 同時我又不想選中 div以外的內容, 默認情況下會將...
摘要:方法可用的屏幕高度窗口可用的屏幕寬度瀏覽器表示的顏色位數用戶瀏覽器表示的顏色位數屏幕的像素高度屏幕的像素寬度對象返回前一個返回下一個返回某個具體頁面 事件 事件:鼠標事件,鍵盤事件,進度事件,表單事件,觸摸事件,拖拉事件,其他常見事件.GlobalEventHandler接口DOM(文檔對象模型)是JavaScript操作網頁的接口,將網頁轉為一個樹狀結構,所有的節點都有借口. DO...
摘要:使用語法統一實現跨端組件請關注文章編寫跨端組件的正確姿勢下篇依靠強大的多態協議,項目中可以輕松使用各端的第三方組件封裝自己的跨端組件庫。這種做法同時解決了組件命名沖突問題,例如在微信小程序端引用表示調用小程序原生的組件而不是內置的組件。 在chameleon項目中我們實現一個跨端組件一般有兩種思路:使用第三方組件封裝與基于chameleon語法統一實現。本篇是編寫chameleon跨端...
閱讀 1523·2021-09-22 15:35
閱讀 2005·2021-09-14 18:04
閱讀 876·2019-08-30 15:55
閱讀 2449·2019-08-30 15:53
閱讀 2680·2019-08-30 12:45
閱讀 1203·2019-08-29 17:01
閱讀 2577·2019-08-29 15:30
閱讀 3514·2019-08-29 15:09