大家都知道ios浏览器有个默认的内置事件,就是长按屏幕,会放大预览你点击的内容。
不同浏览器效果各异,有的浏览器弹出提示框,预览图片或保存图片。主要呈下面2中形式。体验最差的就是后者,会直接将页面中的图片放大预览,打断了用户正常的浏览。
这恼人的体验怎么修正呢?
css有一个pointer-events: none;属性;可以阻止点击事件。
这个方法完美解决了大多数ios主流浏览器的问题。
那么问题来了,QQ浏览器设置css后无效,你要不要解决?
好吧css解决不了,那么只能由js出马了
$('img').click(function(event){ event.preventDefult(); })
总结:
1、页面布局时,需要使用图片的地方,尽量不用img标签,而使用背景图代替。以减少不必要的麻烦。
2、不得不适用img的情况下,比如你使用的插件里面,设定了某个元素必须是img。记得加上pointer-events: none;
3、需要兼容到QQ浏览器或其他有类似问题的浏览器时,使用js给对应的元素的点击事件设置阻止默认事件。