前端碎语（5）

2019年8月30日 146次阅读 来源: Levon

制止用户挑选笔墨

在一些运用场所，我们不愿望用户能够挑选笔墨。比方在拖动交互中，假如用户能挑选元素内部的笔墨，也就意味着能拖动它们，如许就会滋扰对元素的拖动、影响拖动的结果；再如一些网站也会简朴地经由过程制止用户挑选笔墨以防备用户复制站内笔墨（只能骗骗小白罢了，不知道我们都邑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 id="ul">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        var newLi = document.createElement('li');
        var ul = document.getElementById('ul');
        ul.insertBefore(newLi, ul.children[3]);
    </script>

这里ul.children[3]并不存在，直接接见的结果是undefined，然则实行上面的代码却并没有毛病发作（用的chrome），反而直接把新节点插进去了末了，和第二个参数直接传null的结果一样。看来浏览器在完成insertBefore时是有做了容错的，假如第二个参数不是有用的DOM节点也会将其当做null处置惩罚。

然则实际老是严酷的，希望浏览器来给我们处置惩罚毛病并不靠谱，比方上面提到的容错在IE8以下的浏览器是没有滴，假如你在IE8运转上述代码，直接就给你报错了。所以为了你的代码平安运转，一旦你不能保证你要传给insertBefore的第二个参数的是一个有用的节点，那就忠实写成兄弟节点 || null的情势吧，手动祛除失足的时机。

在IE8下运用通明结果

虽然ms已住手对IE8的技术支撑了，但是做前端的还得被它恶心一段时间，有些兼容性的题目是我们仍要面临滴。假如你用opacity和rgba撸了一个有通明结果的页面，放到IE8-下一看，乖乖，一点模糊的美感都没有了。。。

《前端碎语（5）》

然则，前端界被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。

    原文作者：Levon
    原文地址: https://segmentfault.com/a/1190000004511085
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞