微信公众号网页开发——阻止微信客户端内点击任何图片自动放大
<p>在开发微信公众号时遇到一个问题，在微信客户端内点击公众号网页任何图片都会自动全屏放大预览，这个问题导致原本点击的是某个功能，结果却没有跳转或实现功能，而是把功能DIV元素块的背景图给放大预览了</p><p> </p>
<p>解决方法：在公共样式文件内加入以下CSS代码移除img标签的可点击事件属性，加上后所有作用于img标签的onclick事件将无效</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">img</span>{<span style="color: rgba(255, 0, 0, 1)">
pointer-events</span>:<span style="color: rgba(0, 0, 255, 1)">none</span>;
}</pre>
</div>
<p> </p>
<p> </p>
<p> </p>
<p>现在这个问题解决了，但是还有一个新问题来了，需要点击放大预览的图片现在点击没有任何反应了，准确的说应该是所有带有图片的元素的点击事件都失效了，比如背景图是覆盖满元素的</p>
<p> </p>
<p>解决方法：在公共样式文件内加入以下CSS代码让拥有该类名的元素可点击事件生效，在需要点击放大预览的图片上加上该类名后即可正常触发onclick事件</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 0, 0, 1)">.img</span>{<span style="color: rgba(255, 0, 0, 1)">
pointer-events</span>:<span style="color: rgba(0, 0, 255, 1)">auto</span>;
}</pre>
</div>
<p> </p>
<p> </p>
<p>jQuery weui 预览图片</p>
<div class="cnblogs_code">
<pre>$('.img'<span style="color: rgba(0, 0, 0, 1)">).click(
</span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
</span><span style="color: rgba(0, 0, 255, 1)">var</span> This = $(<span style="color: rgba(0, 0, 255, 1)">this</span><span style="color: rgba(0, 0, 0, 1)">);
</span><span style="color: rgba(0, 0, 255, 1)">var</span> img =<span style="color: rgba(0, 0, 0, 1)"> $.photoBrowser({
items: [
This.attr(</span>'src'<span style="color: rgba(0, 0, 0, 1)">)
]
});
img.open();</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">打开</span>
<span style="color: rgba(0, 0, 0, 1)"> }
);</span></pre>
</div>
<p> </p>
<p> </p>
<p><span style="font-size: 18px">知识普及：<span style="color: rgba(51, 102, 255, 1)"><span style="color: rgba(51, 102, 255, 1)">CSS Demo: pointer-events</span></span></span></p>
<p> </p><br><br>
来源：https://www.cnblogs.com/shengxihui/p/10960700.html
頁:
[1]