微信公眾號網頁開發——阻止微信客戶端內點擊任何圖片自動放大

在開發微信公眾號時遇到一個問題，在微信客戶端內點擊公眾號網頁任何圖片都會自動全屏放大預覽，這個問題導致原本點擊的是某個功能，結果卻沒有跳轉或實現功能，而是把功能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