禁用图像上单击鼠标右键在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
提前感谢！
答
一种选择是通过将缩略图图像添加到“缩略图”类.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>
你尝试过CSS：'{IMG用户选择：无;指针事件：无; ''？ – Sam0
此外/或者您可以使用透明div遮挡图像以使图像无法通过触摸选项进行访问，对于较小的图像，您可以执行相同操作，并从透明div注册点击事件而不是图像。 – Sam0
@ Sam0当我使用上面提到的css时，它解决了我的ios问题。不幸的是，我也无法点击小缩略图（请参阅：http：//www.feather.com.lk/p-cotton.php）在较大的盒子上切换图像:( 如果您不介意，您可以请举例说明你的第二条评论？ –