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最新技术,与企业需求同步。好友都在里面学习交流,每天都会有大牛定时讲解前端技术!

点击:加入

原文地址:https://blog.51cto.com/14227711/2364103

时间: 2024-10-10 12:42:16

H5页面阻止图片和文字被选中的相关文章

h5页面转图片长按保存

5页面经常会遇到此类需求.将最后的结果页转换为图片长按保存.下面介绍一下实现此需求的过程 1,依赖安装 cnpm install html2canvas --save 2,依赖引入,使用 绑定 初始化 由此,页面转换为图片完成 原文地址:https://www.cnblogs.com/shmily-code/p/9667151.html

iOS TabbarController 设置底部Toolbar图片和文字颜色选中样式

提取公共方法: -(void)createChildVcWithVc:(UIViewController *)vc Title:(NSString *)title image:(NSString *)image selectedImage:(NSString *)selectedImage { //图片渲染 vc.tabBarItem.title=title; vc.navigationItem.title=title; vc.tabBarItem.image=[UIImage imageNam

易企秀 we+ Maka 兔展 四大H5页面制作工具

H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合通过手机的展示.分享.也因其灵活性高.开发成本低.制作周期短的特性使其成为当下企业营销的不二利器,常见于企业宣传.活动推广.产品介绍.会议邀请.公司招聘等. 面对四大在线H5互动展示制作工具,企业营销应该如何选择更适合的H5制作工具呢?今天小编就给大家带来四大在线HTML5互动展示工具的评测. MA

移动端H5页面高清多屏适配方案

背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

h5页面在移动端需要注意的一些事情

H5页面在移动端无法满屏自适应窗口,怎么办? <meta name="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/> H5页面在移动端字体应该怎么设置? 1.iOS 系统 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue 无微

分针网—每日分享:H5 页面高级字体应用实践

前端开发 背景 最近在开发一个 H5 活动页快速搭建平台,可以通过拖拽编辑图片,文字等元素组件,快速搭建出一个移动端的活动页面,基本交互和成品效果类似 PPT 软件.这类活动大量在微信等平台上传播,其中会包含各种动画和特效,而各类高级艺术字体(如:方正兰亭黑,方正彩云,方正大草,方正剑体等)的应用也非常广泛. 之前用户只能通过 ps 等软件将文字转化为图片再贴到平台上使用.使用成本很高,修改,调试都非常不便,而且图片占用的资源也比较多,为了降低用户的使用成本,基于一站式搭建的理念,我们需要将高级

10个H5页面制作工具

目前市面上各种H5页面制作工具,其中既有滥竽充数的,也有真材实料的.但是怎么区分呢?其实最简单的办法就是看案例,也就是用这些H5页面制作工具能做出哪些类型的H5. 笔者在创作H5的路上走过很多坑,基本国内外所有的H5页面制作工具都用了一遍,这篇文章也是希望能让大家在H5页面制作工具的选择上少走点弯路. 以下是笔者浏览了近万个优质案例后,总结出来的各大H5页面制作工具对H5种类的支持分析,以及付费情况. 1. 易企秀 http://www.eqxiu.com/ 百度指数:★★★★★ 易企秀界面 作

H5页面的基本测试点

优势: H5可以跨平台使用,开发成本相对较低 H5可随时上线就更新版本,适合快速迭代 H5可以轻量的触达用户,提供更便捷的服务 在微信入口或者浏览器上,用户只需点开链接就可以获取我们锁提供的服务 劣势: H5->app的转化强依赖于浏览器 H5目前基本无法将数据存储在本地,依赖实时性数据,网络状态不好的时候卡到哭. 性能相对较低,影响用户体验 如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS)

H5页面测试点总结

如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS),那么就是WebView! 横屏竖屏相互切换,能自适应,并且布局不会乱掉: H5的页面在PC端也是能访问的,chrome对H5支持最好,功能的测试可以在PC端chrome下先测试,也可以在手机上直接测试,这个看个人习惯.(ie系列包括ie8,及以下都支持的不好,这个可以与PD确认H5页面在这些PC浏览器上不支持) 1.UI测试 ①查看所有页面展