0

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

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

提前致谢！

4

1 回答 1

0

一种选择是通过将缩略图添加到 'thumbnail' 类中来允许缩略图上的“指针事件” .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-26T19:42:52.900 回答