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


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 相关文章推荐
本地对象Array的原型扩展实现代码
Dec 04 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
JavaScript File分段上传
Mar 10 Javascript
解决angularJS中input标签的ng-change事件无效问题
Sep 13 Javascript
原生js实现淘宝放大镜效果
Oct 28 Javascript
微信小程序 this.triggerEvent()的具体使用
Dec 10 Javascript
微信小程序实现搜索框功能及踩过的坑
Jun 19 Javascript
解决vue里a标签值解析变量,跳转页面,前面加默认域名端口的问题
Jul 22 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
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
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
关于使用key/value数据库redis和TTSERVER的心得体会
2013/06/28 PHP
PHP 过滤页面中的BOM(实现代码)
2013/06/29 PHP
php统计文章排行示例
2014/03/04 PHP
PHP+iFrame实现页面无需刷新的异步文件上传
2014/09/16 PHP
php生成无限栏目树
2017/03/16 PHP
extjs 学习笔记 四 带分页的grid
2009/10/20 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
JavaScript中获取未知对象属性的代码
2011/04/27 Javascript
调用DOM对象的focus使文本框获得焦点
2014/02/19 Javascript
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
jquery.validate使用详解
2016/06/02 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
Bootstrap基本插件学习笔记之Alert警告框(20)
2016/12/08 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
bootstrap weebox 支持ajax的模态弹出框
2017/02/23 Javascript
微信小程序实现图片放大预览功能
2020/10/22 Javascript
Vue.js 动态为img的src赋值方法
2018/03/14 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
使用python编写脚本获取手机当前应用apk的信息
2014/07/21 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Django之PopUp的具体实现方法
2019/08/31 Python
弄懂这56个Python使用技巧(轻松掌握Python高效开发)
2019/09/18 Python
pandas apply多线程实现代码
2020/08/17 Python
金鑫耀Java笔试题
2014/09/06 面试题
暑期社会实践学生的自我评价
2014/01/09 职场文书
《锄禾》教学反思
2014/04/08 职场文书
在校实习生求职信
2014/06/18 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
房屋产权证明书
2015/06/19 职场文书
小学作文指导之如何写人?
2019/07/08 职场文书
Django中celery的使用项目实例
2022/07/07 Python