如何阻止移动端浏览器点击图片浏览


Posted in Javascript onAugust 29, 2020

在一些移动端浏览器上,如果点击图片,会产生一个浏览图片的行为。

QQ没有这种默认行为,但是UC浏览器有。

所以为了达到一致的效果,这种默认的浏览行为是需要被禁止的。

下面介绍几种方法:

1.在img元素上添加 onclick="return false"

<img src="a.png" onclick="return false" />

2.图片用背景图的方式插入

background:url(a.png) norepeat center;

3.使用js事件阻止默认行为的方法,这里需要注意哦!

var img = document.getElementById('banner');
img.addEventListener('click',function(e){
e.preventDefault();
});

关于这里的click事件,其实也可以是touchend事件,但是不可以是touchstart和touchmove事件!

因为使用touchstart和touchmove事件的时候,假如页面顶部有个超级大的banner图,那么当横屏显示或者类似于ipad等屏幕宽度大于高度的情况下,整个banner图都占满了屏幕,这个时候页面没法滑动。因为你用touchstart和touchmove禁止掉了图片的默认行为,所以手指怎么滑动,页面都没反应的。刚好这个滑动的行为触发了touchstart和touchmove。

4.通过 CSS3 属性实现

img {
pointer-events: none;
}

这样设置会让img标签的点;事件失效,如果需要点击保留事件,需要添加父元素处理点击事件。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
jquery事件与函数的使用介绍
Sep 29 Javascript
JavaScript对象学习经验整理
Oct 12 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
使用javascript将时间转换成今天,昨天,前天等格式
Jun 25 Javascript
使用jquery提交form表单并自定义action的实现代码
May 25 Javascript
jquery实现图片切换代码
Oct 13 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
vuex入门最详细整理
Mar 04 Javascript
Vue 中使用lodash对事件进行防抖和节流操作
Jul 26 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 #Javascript
JS如何判断对象是否包含某个属性
Aug 29 #Javascript
JS获取当前时间戳方法解析
Aug 29 #Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 #Javascript
JS访问对象两种方式区别解析
Aug 29 #Javascript
js在HTML的三种引用方式详解
Aug 29 #Javascript
toString.call()通用的判断数据类型方法示例
Aug 28 #Javascript
You might like
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
用Javascript实现Sleep暂停功能代码
2010/09/03 Javascript
jquery trigger伪造a标签的click事件取代window.open方法
2014/06/23 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
2020/03/26 Javascript
详解nodejs express下使用redis管理session
2017/04/24 NodeJs
JavaScript限定范围拖拽及自定义滚动条应用(3)
2017/05/17 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
JS根据Unix时间戳显示发布时间是多久前【项目实测】
2019/07/10 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
基于JavaScript的数据结构队列动画实现示例解析
2020/08/06 Javascript
Python 除法小技巧
2008/09/06 Python
Python异常处理总结
2014/08/15 Python
Python实现读取字符串按列分配后按行输出示例
2018/04/17 Python
Python中pandas dataframe删除一行或一列:drop函数详解
2018/07/03 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
基于python操作ES实例详解
2019/11/16 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
python基于event实现线程间通信控制
2020/01/13 Python
python3 简单实现组合设计模式
2020/07/02 Python
canvas 实现 github404动态效果的示例代码
2017/11/15 HTML / CSS
JSF面试题:Jsf中导航的标签是什么
2013/04/20 面试题
销售经理竞聘书
2014/03/31 职场文书
计算机专业求职信
2014/06/02 职场文书
2015元旦节寄语
2014/12/08 职场文书
2014年财政局工作总结
2014/12/09 职场文书
实名检举信范文
2015/03/02 职场文书
见习期个人总结
2015/03/05 职场文书
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL