数码资讯
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最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!
点击:加入
声明:本文内容用于数码产品信息整理与选购参考,具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。