阻止移动端浏览器点击图片会预览的几种方法

时间: 2018-07-09阅读: 2776标签: 移动端

在移动端部分浏览器中点击了图片,变成了查看图片的效果,怎么防止img的图片被手机浏览器的图片查看器打开呢?下面整理了一些方法来实现。


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

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


2、背景图的方式插入(这种是比较普遍的方式)

background:url(./img/tip.png) norepeat center;
background-size: cover;


3.使用js事件阻止默认行为的方式

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

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

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


我的解决方法:点击的时候在img标签里加了个阻止默认行为的事件

preventTouch(e) {
  e.stopPropagation();
  e.preventDefault();
}


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/916

vue中的适配:px2rem

这应该是vue项目在适配移动端时候,最简单的方法之一。下载并引入lib-flexible,引入px2rem-loader,将px2rem-loader添加到cssLoaders,完了就可以直接用px做单位按照750的设计稿撸代码了。

rem.js的用法及在浏览器端的适配

更新换代快的大前提下自然又涌现出了适配问题,主流解决方案有很多,如响应式布局、cover布局、container布局 这几种布局在大多数情况下不限制高度的页面下还是相当有用的

移动端开发注意问题

这篇文章主要总结移动端页面开发时需要注意的一些问题。比如:防止手机中网页放大和缩小、format-detection设置、上下拉动滚动条时卡顿慢 、禁止复制选中文本...

移动端适配必须掌握的基本概念和适配方案

随着技术的发展,移动设备越来越流行,并且不同设备间屏幕尺寸和屏幕像素的差异,移动端开发面临着多分辨率适配的问题

移动端重置样式 特殊处理

禁止用户选中文字,安卓无效 ­webkit­user­select: none;禁止长按弹出系统菜单。 ­webkit­touch­callout: none;

移动端如何强制页面横屏

有些机型有些app不能横屏:比如Android的微信就没有横屏模式,而ios的微信能开启横屏模式。解决办法就是在竖屏模式下,写一个横屏的div,然后设置rotate正(负)90度,把他旋转过来;而且如果用户切到横屏时,需要把rotate复原,要求也能正常展现。

移动端双指缩放图片JS事件的实践心得

页面整体缩放行为是可以通过按住Shift键+页面左键模拟的,但是,实际上,还是一个触摸点,因此无法模拟双指缩放行为。除非是有触摸板,或者屏幕就是触摸屏。

js实现移动端微信禁止字体被放大或缩小,防止排版错乱

由于微信webvie内置了调整字体大小的功能,如果用户调整了这一设置,就会导致了网页中的字体比原本的尺寸偏大或偏小,使得网页可能出现排版错乱,或者字体太小看不清的情况发生

移动端适配vw方案

设计师交付给前端开发一张宽度为750px的视觉稿,设计稿上元素的尺寸、颜色、位置等已做过标注,要求工程师工在适配不同屏幕尺寸的设备时采用等比缩放的方案。前面我们讲过两种等比缩放的方案:viewport缩放 和 动态REM

js判断pc端和手机端

js判断是否为移动端代码,获取用户userAgent代理头的值,进行匹配判断,如果匹配到就进行跳转到移动端。查看当前代理头信息在浏览器中按F12进入调试模式,查看请求

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!