web页面ios浏览器img图片的坑

大家都知道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给对应的元素的点击事件设置阻止默认事件。