设为首页 - 加入收藏 ASP站长网(Aspzz.Cn)- 科技、建站、经验、云计算、5G、大数据,站长网!
热搜: 手机 公司 数据
当前位置: 首页 > 运营中心 > 网站设计 > 正文

微信公众号网页开发——阻止微信客户端内点击任何图片自动放大

发布时间:2021-02-05 05:31 所属栏目:12 来源:网络整理
导读:在开发微信公众号时遇到一个问题,在微信客户端内点击公众号网页任何图片都会自动全屏放大预览,这个问题导致原本点击的是某个功能,结果却没有跳转或实现功能,而是把功能DIV元素块的背景图给放大预览了 ? 解决方法:在公共样式文件内加入以下CSS代码移除im

在开发微信公众号时遇到一个问题,在微信客户端内点击公众号网页任何图片都会自动全屏放大预览,这个问题导致原本点击的是某个功能,结果却没有跳转或实现功能,而是把功能DIV元素块的背景图给放大预览了

?

解决方法:在公共样式文件内加入以下CSS代码移除img标签的可点击事件属性,加上后所有作用于img标签的onclick事件将无效

img{
  pointer-events:none;  
}

?

?

?

现在这个问题解决了,但是还有一个新问题来了,需要点击放大预览的图片现在点击没有任何反应了

?

解决方法:在公共样式文件内加入以下CSS代码让拥有该类名的元素可点击事件生效,在需要点击放大预览的图片上加上该类名后即可正常触发onclick事件

.img{
   pointer-events:auto;
 }

?

?

jQuery weui 预览图片

$(‘.img‘).click(
     function () {
          var This = $(this);
          var img = $.photoBrowser({
                items: [
                    This.attr(‘src‘)
                ]
          });
          img.open();  //打开
     }

 );

?

?

知识普及:CSS Demo: pointer-events

(编辑:ASP站长网)

    网友评论
    推荐文章
      热点阅读