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