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;
        }
    });
});

这适用于桌面和所有机器人。但是，它不适用于Ipads和Iphone。我怎样才能克服这个问题？请帮忙。

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

提前致谢！

Answer 1

一种选择是通过将缩略图添加到“缩略图”类.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>

禁用右键单击图像不适用于ipad和iphone

1 个答案: