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