安卓端微信点击图片被放大问题

最近的抽奖活动没有基于框架开发,在使用同事的安卓手机在微信调试活动页面时,不小心点到了背景图,结果图片被放大了,有点类似于点击公众号文章图片后触发的图片浏览效果。

该问题只在安卓端微信存在,解决方案如下:

Plan A:

使用 js 阻止点击图片后的默认行为:

$('.none-events').on('click',function(e) { 
    e.preventDefault(); 
}) 

该方法可以解决问题但是会导致点击 a 标签内的图片不能跳转:

<a href="https://www.toyou.xyz">  <!--无法跳转-->
    <img src="https://www.toyou.xyz/images/android-wechat-image/0.jpg" alt="">
</a>

因为事件的触发顺序是由里向外的,若阻止了子元素的默认行为,则父元素的默认行为便不会生效。

Plan B:

使用 css 移除图片的事件:

img.none-events {
  pointer-events: none;
}

当元素 pointer-events 属性值为 none 时表示,该元素不会成为鼠标事件的 target:

<style>
div{
    display:inline-block;
    padding:20px;
    background-color:blue;
    pointer-events: none; 
}
</style>
 <div onclick="alert('div')"></div>

若父元素的 pointer-events 属性值为 none ,但子元素的 pointer-events 属性值不为 none,则子元素事件有效并且会在冒泡阶段触发父元素的事件:

<style>
div{
    display:inline-block;
    padding:20px;
    background-color:blue;
    pointer-events: none; 
}
p{
    width:50px;
    height:50px;
    background-color:red;
    pointer-events: auto; 
}
</style>
 <div onclick="alert('div')">
    <p  onclick="alert('p')"></p>
</div>

该方案虽然简单,但是也会导致 a 标签无法跳转,图片 hover 事件失效。

总结

两种方案各有优缺点,怎么选用还是要看具体情况。

Last Updated: 7/16/2020, 11:24:55 PM