摘要:與都屬于當(dāng)中的事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單的記錄。第一次錯將事件當(dāng)成了實(shí)現(xiàn)這個效果的事件,試過之后發(fā)現(xiàn)不管用,繼續(xù)研究發(fā)現(xiàn)其實(shí)應(yīng)該是用事件來進(jìn)行控制。
onselect 與 onselectstart 都屬于 JavaScript 當(dāng)中的 DOM 事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單的記錄。
背景之前在公司的前端項目中,自己寫了一個基于 jquery 的分頁器,在測試的時候發(fā)現(xiàn)了一個問題:當(dāng)鼠標(biāo)連續(xù)快速點(diǎn)擊【下一頁】按鈕的時候,會將按鈕上的文字選中,變成藍(lán)色,體驗不是很好。因為當(dāng)時知道有一個事件是可以控制元素文字是否允許被選中的,但是忘記了怎么用的,于是上網(wǎng)搜索了一番。第一次錯將 onselect 事件當(dāng)成了實(shí)現(xiàn)這個效果的事件,試過之后發(fā)現(xiàn)不管用,繼續(xù)研究發(fā)現(xiàn)其實(shí)應(yīng)該是用 onselectstart 事件來進(jìn)行控制。
二者的區(qū)別onselect 事件會在文本框中的文本被選中時發(fā)生
支持該事件的 HTML 標(biāo)簽:,
支持該事件的 JavaScript 對象:window
使用舉例:
即當(dāng)鼠標(biāo)的左鍵劃過并選中了 input 輸入框中的內(nèi)容時,就會觸發(fā) onselect 事件。
onselectstart 觸發(fā)時間為目標(biāo)對象被開始選中時(即選中動作剛開始,尚未實(shí)質(zhì)性被選中)
onselectstart 幾乎可以用于所有對象
注意:onselectstart 事件不被 input 和 textarea 標(biāo)簽支持
使用舉例(非 Firefox 瀏覽器下):
我不能被鼠標(biāo)選中哦
Firefox 不支持上面這樣的使用方式,在 Firefox 瀏覽器下可以通過設(shè)置 CSS 樣式來達(dá)到相同的效果
div { -moz-user-select: none; }
即 onselectstart 事件才是用來實(shí)現(xiàn)元素內(nèi)文本不被選中的正確方法。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/49898.html
摘要:與都屬于當(dāng)中的事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單的記錄。第一次錯將事件當(dāng)成了實(shí)現(xiàn)這個效果的事件,試過之后發(fā)現(xiàn)不管用,繼續(xù)研究發(fā)現(xiàn)其實(shí)應(yīng)該是用事件來進(jìn)行控制。 onselect 與 onselectstart 都屬于 JavaScript 當(dāng)中的 DOM 事件,由于它們二者的拼寫比較相似,所以最初使用時弄混了兩個事件的效果,在此做一個簡單...
摘要:背景有一塊元素包含一段內(nèi)容想要利用選中那塊元素下的的區(qū)間同時我又不想選中以外的內(nèi)容默認(rèn)情況下會將整個頁面可以選中的內(nèi)容選中我想被選中實(shí)踐我想被選中我也想被選中原理利用屬性讓元素?fù)碛锌丶詭У念愃戚斎胩匦阅敲词褂没蚓蜁o你選中里面的文本元素由 背景 有一塊div元素包含一段內(nèi)容, 想要利用 CTRL+A 選中那塊div元素下的的區(qū)間. 同時我又不想選中 div以外的內(nèi)容, 默認(rèn)情況下會將...
摘要:背景有一塊元素包含一段內(nèi)容想要利用選中那塊元素下的的區(qū)間同時我又不想選中以外的內(nèi)容默認(rèn)情況下會將整個頁面可以選中的內(nèi)容選中我想被選中實(shí)踐我想被選中我也想被選中原理利用屬性讓元素?fù)碛锌丶詭У念愃戚斎胩匦阅敲词褂没蚓蜁o你選中里面的文本元素由 背景 有一塊div元素包含一段內(nèi)容, 想要利用 CTRL+A 選中那塊div元素下的的區(qū)間. 同時我又不想選中 div以外的內(nèi)容, 默認(rèn)情況下會將...
摘要:方法可用的屏幕高度窗口可用的屏幕寬度瀏覽器表示的顏色位數(shù)用戶瀏覽器表示的顏色位數(shù)屏幕的像素高度屏幕的像素寬度對象返回前一個返回下一個返回某個具體頁面 事件 事件:鼠標(biāo)事件,鍵盤事件,進(jìn)度事件,表單事件,觸摸事件,拖拉事件,其他常見事件.GlobalEventHandler接口DOM(文檔對象模型)是JavaScript操作網(wǎng)頁的接口,將網(wǎng)頁轉(zhuǎn)為一個樹狀結(jié)構(gòu),所有的節(jié)點(diǎn)都有借口. DO...
摘要:使用語法統(tǒng)一實(shí)現(xiàn)跨端組件請關(guān)注文章編寫跨端組件的正確姿勢下篇依靠強(qiáng)大的多態(tài)協(xié)議,項目中可以輕松使用各端的第三方組件封裝自己的跨端組件庫。這種做法同時解決了組件命名沖突問題,例如在微信小程序端引用表示調(diào)用小程序原生的組件而不是內(nèi)置的組件。 在chameleon項目中我們實(shí)現(xiàn)一個跨端組件一般有兩種思路:使用第三方組件封裝與基于chameleon語法統(tǒng)一實(shí)現(xiàn)。本篇是編寫chameleon跨端...
閱讀 2026·2019-08-30 15:52
閱讀 2987·2019-08-29 16:09
閱讀 1333·2019-08-28 18:30
閱讀 2460·2019-08-26 12:24
閱讀 1107·2019-08-26 12:12
閱讀 2281·2019-08-26 10:45
閱讀 578·2019-08-23 17:52
閱讀 837·2019-08-23 16:03