时间:2021-05-18
在一些移动端浏览器上,如果点击图片,会产生一个浏览图片的行为。
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标签的点;事件失效,如果需要点击保留事件,需要添加父元素处理点击事件。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
chrome浏览器如何阻止所有的Cookie呢?下面就来教大家如何设置阻止所有网站的Cookie。软件名称:谷歌浏览器(GoogleChrome)v87.0.4
js阻止浏览器默认行为触发的通用方法(推荐)//阻止浏览器默认行为触发的通用方法functionstopDefault(e){//防止浏览器默认行为(W3C)i
阻止冒泡:1、stopPropagation()对于非IE浏览器。2、cancelBubble属性为true,对于IE浏览器,而Jquery已经有兼容浏览器的方
本文实例讲述了js判断浏览器版本以及浏览器内核的方法。分享给大家供大家参考。具体实现方法如下:js判断是否移动端及浏览器内核varbrowser={versio
搜狗浏览器提取网页图片方法如下: 1、打开搜狗浏览器,依次点击标题栏的工具,工具盒子,添加; 2、在搜索栏输入,图片浏览器搜索插件,并安装; 3、安装好后