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

赵连江发布于2019-08-02 14:23 / 2298人阅读

摘要：页面设置图片和标签等不可选中阻止标签等文字被选中在对应元素的样式中加阻止浏览器点击图片查看的行为常见于浏览器背景图的方式插入这种是比较普遍的方式使用事件阻止默认行为的方法

H5页面设置图片和span标签等不可选中 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();
});

GPU云服务器云服务器 H5移动端上传图片被选中文字移动端webrtc h5 移动端页面

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

转载请注明本文地址：https://www.ucloud.cn/yun/53767.html

H5项目常见问题汇总及解决方案

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。原文链接 - https://github.com/FrontEndRo... H5项目常见问题及注意事项 Meta基础知识： H5页面窗口自动调整到设备...

marser 2019-08-20 14:08 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

honhon 2019-08-21 10:51 评论0 收藏0
H5项目常见问题及注意事项

摘要：解决方案可以解决在手机上点击事件的延迟的模块，事件也是为了解决在的延迟问题显示屏原理及设计方案说明屏是一种具备超高像素密度的液晶屏，同样大小的屏幕上显示的像素点由个变为多个，如在同样带下的屏幕上，苹果设备的显示屏中，像素点个变为个。 Meta基础知识： H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 //一、HTML页面结构 // width 设置viewport宽度，为一...

Little_XM 2019-08-30 13:07 评论0 收藏0