禁用右键单击图像在iPad和iPhone上不起作用

Question

我使用以下代码禁用右键单击我的网站中的图像：

//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

提前感谢！

Answer 1

一种选择是通过将缩略图添加到"缩略图"类.thumbnail { pointer-events: auto; }来允许缩略图图像上的"指针事件"。这将允许用户右键单击在iOS上下载一个小缩略图。

另一种选择是用相邻的"拇指包装器"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>