資訊專欄INFORMATION COLUMN
摘要：禁止用戶選擇文字在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經(jīng)停止對的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問題是我們?nèi)砸鎸Φ?。但是，前端界被虐了這么多年，解決問題的方法總是有的。
禁止用戶選擇文字
在一些應(yīng)用場合，我們不希望用戶能夠選擇文字。比如在拖動(dòng)交互中，如果用戶能選擇元素內(nèi)部的文字，也就意味著能拖動(dòng)它們，這樣就會(huì)干擾對元素的拖動(dòng)、影響拖動(dòng)的效果；再如一些網(wǎng)站也會(huì)簡單地通過禁止用戶選擇文字以防止用戶復(fù)制站內(nèi)文字（只能騙騙小白而已，不知道我們都會(huì)F12嗎<(￣︶￣)>）。
如何實(shí)現(xiàn)呢？可以采用CSS的user-select屬性，不過這個(gè)屬性是非標(biāo)準(zhǔn)的，所以加前綴就少不了了：
.notSelect {
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit瀏覽器*/
-ms-user-select: none; /*IE10*/
user-select: none;
}
在要禁止文字選擇的區(qū)域加上上面這個(gè)類即可，要全局禁用就加到body上咯。如果要兼容老舊IE，則應(yīng)該設(shè)置元素的onselectstart屬性，可以使用如下js：
element.onselectstart = function() {
return false;
};
安全地使用insertBefore()方法
Node.insertBefore()方法可不止能用來插入節(jié)點(diǎn)到指定節(jié)點(diǎn)前面，其實(shí)你想添加到哪里都可以。因?yàn)樗牡诙€(gè)參數(shù)既可以是參考的兄弟節(jié)點(diǎn)，還可以是null，傳入null的效果就是把節(jié)點(diǎn)插入到最后，相當(dāng)于實(shí)現(xiàn)了Node.appendChild()。所以，我們把它當(dāng)成一個(gè)添加子節(jié)點(diǎn)的全能方法。
但是如果第二個(gè)參數(shù)不是調(diào)用該方法的節(jié)點(diǎn)的一個(gè)有效子節(jié)點(diǎn)、也不是null，會(huì)有什么問題呢？我們來驗(yàn)證一下：
這里ul.children[3]并不存在，直接訪問的結(jié)果是undefined，但是執(zhí)行上面的代碼卻并沒有錯(cuò)誤發(fā)生（用的chrome），反而直接把新節(jié)點(diǎn)插入了最后，和第二個(gè)參數(shù)直接傳null的效果一樣。看來瀏覽器在實(shí)現(xiàn)insertBefore時(shí)是有做了容錯(cuò)的，如果第二個(gè)參數(shù)不是有效的DOM節(jié)點(diǎn)也會(huì)將其當(dāng)成null處理。
但是現(xiàn)實(shí)總是殘酷的，指望瀏覽器來給我們處理錯(cuò)誤并不靠譜，比如上面提到的容錯(cuò)在IE8以下的瀏覽器是沒有滴，如果你在IE8運(yùn)行上述代碼，直接就給你報(bào)錯(cuò)了。所以為了你的代碼安全運(yùn)行，一旦你不能保證你要傳給insertBefore的第二個(gè)參數(shù)的是一個(gè)有效的節(jié)點(diǎn)，那就老實(shí)寫成兄弟節(jié)點(diǎn) || null的形式吧，手動(dòng)消滅出錯(cuò)的機(jī)會(huì)。
在IE8下使用透明效果雖然ms已經(jīng)停止對IE8的技術(shù)支持了，然而做前端的還得被它惡心一段時(shí)間，有些兼容性的問題是我們?nèi)砸鎸Φ巍Ｈ绻阌?b>opacity和rgba擼了一個(gè)有透明效果的頁面，放到IE8-下一看，乖乖，一點(diǎn)朦朧的美感都沒有了。。。
但是，前端界被IE虐了這么多年，解決問題的方法總是有的。我們可以使用IE獨(dú)有的DX濾鏡來解決透明效果的問題，這里以opacity和在背景使用rgba顏色為例，我們都可以找到替代的方法：
opacity: x --->
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100*x);
background: rgba(0,0,0,x); --->
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#y000000,endColorstr=#y000000);
/* 其中y=255*x（十六進(jìn)制），y后面的六位是十六進(jìn)制顏色 */
這里要注意兩點(diǎn)，一是用于背景色透明的方法似乎只能用于塊級(jí)元素，對行內(nèi)元素并沒有效果。二是由于IE9同時(shí)支持標(biāo)準(zhǔn)的透明和濾鏡，所以上面的代碼在IE9中可能會(huì)有沖突，同時(shí)為了避免和其他瀏覽器的沖突，上面的代碼最好只用作IE9以下瀏覽器的hack。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/115066.html
摘要：而寫成還可以滿足你獲得回調(diào)函數(shù)返回值的需求。而構(gòu)建函數(shù)表達(dá)式的方法也不止把聲明括起來這種，一些其他的操作符也可以，比如賦值號(hào)到目前為止，我們似乎能夠得出結(jié)論函數(shù)聲明后不可直接跟圓括號(hào)，而函數(shù)表達(dá)式后面可以。 使用setTimeout替代setInterval setInterval()這個(gè)間歇調(diào)用函數(shù)是應(yīng)用得比較廣的，尤其在比較古老的瀏覽器中實(shí)現(xiàn)動(dòng)畫效果時(shí)，往往離不開它。然而這個(gè)函數(shù)卻...
摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含。和仍要分有沒有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁面內(nèi)容的大小沒滾動(dòng)時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個(gè)元素的可視寬高。 光標(biāo)效果不見了？ 在頁面里，屏幕上光標(biāo)的樣式我們可以用css的cursor屬性進(jìn)行定義。一般來講，只要光標(biāo)hover到指定的元素上面其樣式就會(huì)按我們指定的進(jìn)行顯示，但是如...
摘要：和屬性數(shù)值對應(yīng)的是元素的內(nèi)容加所占據(jù)的視覺面積，有滾動(dòng)條時(shí)還要加上滾動(dòng)條，不含。和仍要分有沒有滾動(dòng)，有滾動(dòng)時(shí)指的是整個(gè)頁面內(nèi)容的大小沒滾動(dòng)時(shí)在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個(gè)元素的可視寬高。 光標(biāo)效果不見了？ 在頁面里，屏幕上光標(biāo)的樣式我們可以用css的cursor屬性進(jìn)行定義。一般來講，只要光標(biāo)hover到指定的元素上面其樣式就會(huì)按我們指定的進(jìn)行顯示，但是如...
閱讀 3480·2021-11-19 09:40
閱讀 1496·2021-10-13 09:41
閱讀 2671·2021-09-29 09:35
閱讀 2715·2021-09-23 11:21
閱讀 1703·2021-09-09 11:56
閱讀 836·2019-08-30 15:53
閱讀 848·2019-08-30 15:52
閱讀 604·2019-08-30 12:47
