微信浏览器里面图片添加tap事件 进行跳转的时候 图片会被放大

Question

<div class="wrapper">
    <img src="/images/download/logo.png" class="logo">
    <img src="/images/download/appstore.png" class="appstore">
    <img src="/images/download/android.png" class="android">
</div>

$('.appstore').on("tap",function(){
    window.location.href = 'https://www.baidu.com';
})


$('.android').on("tap",function(){
    window.location.href = 'https://www.baidu.com';
})

微信浏览器里面打开页面 点击.appstore 与.android 的时候有时会放大这两个图片 然后才跳转链接
我希望不要放大图片 这要如何解决

Answer 1

这两周安卓端的微信浏览器内核的bug（特性），表现为 点击 图片时 图片会全屏放大，正常情况下，应该要调用微信提供的jsSDK才会有这效果

解决办法

阻止图片的点击事件的默认行为，是的，在目前安卓微信里，点击图片会全屏放大已经变成了它的默认行为
我们可以写一个事件代理来阻止：

$(document).on('click', 'img', e => {
    e.preventDefault();
})

算是个坑。

---------------------------以下5月2日更新------------------------------------------
上述的解决方案有一个坑：

<a href="http://baidu.com">
 <img src="xxxx.png">
</a>

当图片被a标签包裹的时候，你会惊喜的发现点击后a不能跳转了，就好像a标签的浏览器默认行为被阻止了一样
其实还是上面写法的坑，我们为了能阻止动态渲染的img元素用了事件代理，由document代理的，所以点击的时候e.preventDefault()阻止的其实是document的默认行为，document是网页中的老大，它的默认行为就相当是浏览器的所有默认行为了。。。所以a链接点了也不会跳转

这里最终解决办法呢有下面3种，视情况可搭配使用：

一. 不用a的href跳转，使用js跳转（不推荐，像用户使用富文本插入的html代码就不行了）

二. 不用js，纯使用css来阻止安卓微信的这一行为：

img {
    pointer-events: none;
}

不过这个也有它的副作用，使用后会让直接绑定在img身上点击事件失效，只能给img元素再包裹一层元素，把事件放到这个元素身上

三. 改进下我们之前写的事件代理：

// 递归搜索当前元素所有父级，看是否包含有a标签且有href值
const searchIsHavaTagA = function (currentEle) {
    // 如果一直往上层找，到body还没找到就说明没有了
    if (currentEle.nodeName === 'BODY') {
        return false;
    }
    let parent = currentEle.parentElement;
    if (parent.nodeName === 'A' && parent.getAttribute('href')) {
        return true;
    } else {
        return searchIsHavaTagA(parent);
    }
}
$(document).on('click', 'img', function (e) {
    try {
        // 父级里有a标签且href不为空的，不处理
        if (!searchIsHavaTagA(e.target)) {
            e.preventDefault();
        }
    } catch (error) {
        console.log('阻止图片默认事件失败');
    }
                        
})

Answer 2

直接绑touchstart事件不行么？

Answer 3

楼上正解，我前几天也遇到这个问题了，就是这么解决的。

Answer 4

图片上面加个透明的div