前端碎语（5）

禁止用户选择文字

在一些应用场合，我们不希望用户能够选择文字。比如在拖动交互中，如果用户能选择元素内部的文字，也就意味着能拖动它们，这样就会干扰对元素的拖动、影响拖动的效果；再如一些网站也会简单地通过禁止用户选择文字以防止用户复制站内文字（只能骗骗小白而已，不知道我们都会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-下一看，乖乖，一点朦胧的美感都没有了。。。

但是，前端界被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。