前端碎語（5）

xiaoqibTn 發布于2019-08-19 17:42 / 1631人閱讀

摘要：禁止用戶選擇文字在一些應用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經停止對的技術支持了，然而做前端的還得被它惡心一段時間，有些兼容性的問題是我們仍要面對滴。但是，前端界被虐了這么多年，解決問題的方法總是有的。

禁止用戶選擇文字

在一些應用場合，我們不希望用戶能夠選擇文字。比如在拖動交互中，如果用戶能選擇元素內部的文字，也就意味著能拖動它們，這樣就會干擾對元素的拖動、影響拖動的效果；再如一些網站也會簡單地通過禁止用戶選擇文字以防止用戶復制站內文字（只能騙騙小白而已，不知道我們都會F12嗎<(￣︶￣)>）。

如何實現呢？可以采用CSS的user-select屬性，不過這個屬性是非標準的，所以加前綴就少不了了：

    .notSelect {
        -moz-user-select: none; /*火狐*/
        -webkit-user-select: none; /*webkit瀏覽器*/
        -ms-user-select: none; /*IE10*/
        user-select: none;
    }

在要禁止文字選擇的區域加上上面這個類即可，要全局禁用就加到body上咯。如果要兼容老舊IE，則應該設置元素的onselectstart屬性，可以使用如下js：

    element.onselectstart = function() {
        return false;
    };

安全地使用insertBefore()方法

Node.insertBefore()方法可不止能用來插入節點到指定節點前面，其實你想添加到哪里都可以。因為它的第二個參數既可以是參考的兄弟節點，還可以是null，傳入null的效果就是把節點插入到最后，相當于實現了Node.appendChild()。所以，我們把它當成一個添加子節點的全能方法。

但是如果第二個參數不是調用該方法的節點的一個有效子節點、也不是null，會有什么問題呢？我們來驗證一下：

這里ul.children[3]并不存在，直接訪問的結果是undefined，但是執行上面的代碼卻并沒有錯誤發生（用的chrome），反而直接把新節點插入了最后，和第二個參數直接傳null的效果一樣。看來瀏覽器在實現insertBefore時是有做了容錯的，如果第二個參數不是有效的DOM節點也會將其當成null處理。

但是現實總是殘酷的，指望瀏覽器來給我們處理錯誤并不靠譜，比如上面提到的容錯在IE8以下的瀏覽器是沒有滴，如果你在IE8運行上述代碼，直接就給你報錯了。所以為了你的代碼安全運行，一旦你不能保證你要傳給insertBefore的第二個參數的是一個有效的節點，那就老實寫成兄弟節點 || null的形式吧，手動消滅出錯的機會。

在IE8下使用透明效果

雖然ms已經停止對IE8的技術支持了，然而做前端的還得被它惡心一段時間，有些兼容性的問題是我們仍要面對滴。如果你用opacity和rgba擼了一個有透明效果的頁面，放到IE8-下一看，乖乖，一點朦朧的美感都沒有了。。。

但是，前端界被IE虐了這么多年，解決問題的方法總是有的。我們可以使用IE獨有的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（十六進制），y后面的六位是十六進制顏色 */

這里要注意兩點，一是用于背景色透明的方法似乎只能用于塊級元素，對行內元素并沒有效果。二是由于IE9同時支持標準的透明和濾鏡，所以上面的代碼在IE9中可能會有沖突，同時為了避免和其他瀏覽器的沖突，上面的代碼最好只用作IE9以下瀏覽器的hack。

云服務器 GPU云服務器 html 5是前端嗎 php.5.5.38 mysql 5.5.15 mysql 5.5.16

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78773.html

前端碎語（5）

摘要：禁止用戶選擇文字在一些應用場合，我們不希望用戶能夠選擇文字。在下使用透明效果雖然已經停止對的技術支持了，然而做前端的還得被它惡心一段時間，有些兼容性的問題是我們仍要面對滴。但是，前端界被虐了這么多年，解決問題的方法總是有的。禁止用戶選擇文字在一些應用場合，我們不希望用戶能夠選擇文字。比如在拖動交互中，如果用戶能選擇元素內部的文字，也就意味著能拖動它們，這樣就會干擾對元素的拖動、影響...

xialong 2019-08-30 12:47 評論0 收藏0
前端碎語（3）

摘要：而寫成還可以滿足你獲得回調函數返回值的需求。而構建函數表達式的方法也不止把聲明括起來這種，一些其他的操作符也可以，比如賦值號到目前為止，我們似乎能夠得出結論函數聲明后不可直接跟圓括號，而函數表達式后面可以。使用setTimeout替代setInterval setInterval()這個間歇調用函數是應用得比較廣的，尤其在比較古老的瀏覽器中實現動畫效果時，往往離不開它。然而這個函數卻...

Brenner 2019-08-19 17:40 評論0 收藏0
前端碎語（6）

摘要：和屬性數值對應的是元素的內容加所占據的視覺面積，有滾動條時還要加上滾動條，不含。和仍要分有沒有滾動，有滾動時指的是整個頁面內容的大小沒滾動時在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個元素的可視寬高。光標效果不見了？在頁面里，屏幕上光標的樣式我們可以用css的cursor屬性進行定義。一般來講，只要光標hover到指定的元素上面其樣式就會按我們指定的進行顯示，但是如...

Youngs 2019-08-19 17:45 評論0 收藏0
前端碎語（6）

摘要：和屬性數值對應的是元素的內容加所占據的視覺面積，有滾動條時還要加上滾動條，不含。和仍要分有沒有滾動，有滾動時指的是整個頁面內容的大小沒滾動時在下指視口的大小和下則是和一樣。與屬性在下都和原來一樣指整個元素的可視寬高。光標效果不見了？在頁面里，屏幕上光標的樣式我們可以用css的cursor屬性進行定義。一般來講，只要光標hover到指定的元素上面其樣式就會按我們指定的進行顯示，但是如...

edagarli 2019-08-30 12:49 評論0 收藏0
前端碎語（4）

摘要：鍵盤事件與文本框變化的過程鍵盤事件最基本的應用場合是控制文本框元素，而我們要討論的，就是幾個鍵盤事件發生的時機與文本輸入的過程的關系。可以看到，除了外，事件并不會輸出剛按下的字符，說明他們在文本框變化之前發生而在之后發生。鍵盤事件與文本框變化的過程鍵盤事件最基本的應用場合是控制文本框元素，而我們要討論的，就是幾個鍵盤事件：keydown、keypress、keyup、textInp...

zhiwei 2019-08-21 13:31 評論0 收藏0