前端碎语（5）

xiaoqibTn 发布于2019-08-19 17:42 / 1625人阅读

摘要：禁止用户选择文字在一些应用场合，我们不希望用户能够选择文字。在下使用透明效果虽然已经停止对的技术支持了，然而做前端的还得被它恶心一段时间，有些兼容性的问题是我们仍要面对滴。但是，前端界被虐了这么多年，解决问题的方法总是有的。

禁止用户选择文字

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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