H5页面阻止图片和文字被选中

2019年5月12日 236次阅读 来源: IT智云编程

《H5页面阻止图片和文字被选中》

1.阻止span标签等文字被选中

在对应元素的CSS样式中加


-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select: none; 
-khtml-user-select: none; 
user-select: none;

2.阻止浏览器点击图片查看的行为(常见于uc浏览器)

1.背景图的方式插入(这种是比较普遍的方式)


background:url(./img/tip.png) norepeat center;
background-size: cover;

2.使用js事件阻止默认行为的方法


const imgMask = document.getElementById('mask');
imgMask.addEventListener('click', function (event) {
    event.stopPropagation();
    event.preventDefault();
});

这里推荐一下我的前端学习交流群：784783012 ，里面都是学习前端的从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴。2019最新技术，与企业需求同步。好友都在里面学习交流，每天都会有大牛定时讲解前端技术!

点击：加入

    原文作者：IT智云编程
    原文地址: https://www.jianshu.com/p/e6503eab4ecc
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞