user-select研究

起因是昨天(2017-03-23)有个小伙伴(@灿灿)在一个页面无意中选中了一段文字, 但这个文字又隐藏了, 导致出现了一些诡异的问题, so研究下几种情况下针对不同内容的user-select, pointer-events效果

case1. 期望用户去长按

比如一些图片, 长按有浏览器下载浮层

默认
user-select: none
pointer-events: none

case2. 用户可以自己选择是否选中

比如一些文字, 用户可能会选中去翻译、分享、复制

默认
我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容
user-select: none
我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容,我是测试的内容

case3. 不希望用户去选中

比如一些按钮类、图标类

默认

user-select: none + pointer-events: none

结论:

根据自己的场景需求适当的在元素上使用user-select + pointer-events使其不能被选中.