禁用圖像上單擊鼠標右鍵在iPad上無法正常工作和iPhone

我使用下面的代碼來禁用圖像右鍵單擊在我的網站：禁用圖像上單擊鼠標右鍵在iPad上無法正常工作和iPhone

//disable right click on images 
$(document).ready(function(){ 
    $(document).bind("contextmenu",function(e){ 
     if(e.target.nodeName == 'IMG'){ 
      //context menu attempt on top of an image element 
      return false; 
     } 
    }); 
});

這完全適用於臺式機和所有機器人。但是，它不適用於Ipad和Iphone。我怎樣才能克服這個問題？請幫忙。

我的網站：http://www.feather.com.lk/p-cotton.php

提前感謝！

來源

2017-01-23 Hazra Hameed

你嘗試過CSS：'{IMG用戶選擇：無;指針事件：無; ''？ – Sam0

此外/或者您可以使用透明div遮擋圖像以使圖像無法通過觸摸選項進行訪問，對於較小的圖像，您可以執行相同操作，並從透明div註冊點擊事件而不是圖像。 – Sam0

@ Sam0當我使用上面提到的css時，它解決了我的ios問題。不幸的是，我也無法點擊小縮略圖（請參閱：http：//www.feather.com.lk/p-cotton.php）在較大的盒子上切換圖像:( 如果您不介意，您可以請舉例說明你的第二條評論？ –

一種選擇是通過將縮略圖圖像添加到「縮略圖」類.thumbnail { pointer-events: auto; }來允許縮略圖上的「指針事件」。這將允許用戶在iOS上右擊下載縮略圖。

另一個選擇是用相鄰的「thumbwrapper」div來包裹每個縮略圖以接收點擊事件。在這種情況下，用戶將在div上拉上下文菜單而不是圖像。

你也應該考慮使用.on代替.bind，因爲後者在jQuery的許多新版本被棄用。

//disable right click on images 
 
$('img').on("contextmenu", function(e) { 
 
    if (e.target.nodeName === 'img') { 
 
    //context menu attempt on top of an image element 
 
    return false; 
 
    } 
 
}); 
 

 
$('.mask').on('click', function() { 
 
    $('body').append('clicked <br>'); 
 

 
    // using a div above as well as or instead of the 'pointer-events' css to intercept user clicks 
 
});

.thumbwrapper { 
 
    display: inline-block; 
 
    margin-left: 5%; 
 
    width: 25%; 
 
} 
 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    user-select: none; 
 
    pointer-events: none; 
 
} 
 
.mask { 
 
    position: absolute; 
 
    width: 25%; 
 
    top: 2%; 
 
    height: 30%; 
 
    border: 2px solid #09f; 
 
    background: transparent; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class='thumbwrapper'> 
 
    <img src='https://68.media.tumblr.com/2211e6baf28cb6ae2d4ec644cf8227ef/tumblr_okb3a8PM0E1tg322jo1_540.jpg' /> 
 
</div> 
 

 
<div class='thumbwrapper'> 
 
    <div class='mask'> 
 
    </div> 
 
    <img src='https://68.media.tumblr.com/2211e6baf28cb6ae2d4ec644cf8227ef/tumblr_okb3a8PM0E1tg322jo1_540.jpg' /> 
 
</div> 
 

 
<div class='thumbwrapper'> 
 
    <img src='https://68.media.tumblr.com/2211e6baf28cb6ae2d4ec644cf8227ef/tumblr_okb3a8PM0E1tg322jo1_540.jpg' /> 
 
</div>

來源

2017-01-26 19:42:52 Sam0

禁用圖像上單擊鼠標右鍵在iPad上無法正常工作和iPhone

回答

相關問題