之前开发项目中遇到了一个问题，长按文本弹出复制菜单，点击复制将文本复制到剪切板。一开始想采取系统默认菜单，但是发现没有用，检查了代码发现是全局样式中设置了user-select:none阻止了系统默认菜单的弹出，去除了该样式后发现还是没有用，然后就怀疑是否某些样式叠加也会导致这个问题，然后就开始对两千多行的样式进行测试（二分法折腾了好几个小时），最终还是无法确认哪些样式影响了，只好放弃了该方案，之后又在网上找到一方案，结果放在自己代码中发现又没有用，然后就有点怀疑人生了，开始考虑是不是代码中哪些地方阻止了默认事件，去掉后发现还是木有用，感觉要崩溃了有木有，接下来又开始排查引入的插件，最终找到了罪魁祸首，就是iscroll.js文件，看下面这段代码：
me.preventDefaultException = function (el, exceptions) {
for ( var i in exceptions ) {
if ( exceptions[i].test(el[i]) ) {
return true;
}
}
return false;
};
这里只将 INPUT|TEXTAREA|BUTTON|SELECT 四种标签排除在外，其他的统一return false, 所以我把想要复制的文本添加进来return true之后就可以弹出系统默认菜单啦，具体代码看这里：
me.preventDefaultException = function (el, exceptions) {
for ( var i in exceptions ) {
if ( exceptions[i].test(el[i]) ) {
return true;
}
}
if (el.className == 'xxx') { // 这里排除想要复制的文本标签
return true;
};
return false;
};
但是有些时候我们并不想让系统默认菜单弹出来，而是要自定义，所以就要设置如下样式啦：*{ -webkit-touch-callout:none; -webkit-user-select:none; -khtml-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; -o-user-select:none; }
复制到剪切板的功能可以引入clipboard.js哦，参考：https://blog.csdn.net/qq_35164962/article/details/80539197
网友评论