Question

我正在编写一个脚本，以防止人们右键单击图像。一旦他们点击图像，我就设置了一个警告框来显示图像是否受版权保护。为了尝试解释这是如何工作的，图像在一个模型中，在DOM中没有出现，直到另一个ID被点击（通过AJAX完成）。我等待的脚本直到单击ID并加载模型，然后执行函数以显示警报（如果有右键单击）。问题是，有多个按钮可以单击以显示模型，因此，在我的代码中，我将其中的每个按钮作为目标，如果单击其中任何一个按钮，则会触发该函数。单击ID以显示模型，关闭模型，然后单击另一个ID以使相同模型出现时，会出现此问题。完成此操作后，警报会多次显示。因此，如果您花一些时间点击激活该功能的所有ID，当您最终右键单击该图像时，该警报可能会显示10-20次。无论函数执行多少次，我都在寻找一种方法让alter只显示一次。

我的脚本如下：

function imageClickerz( ) {
    $( "#sb-wrapper-inner" ).each(function( index ) {
         $('#sb-wrapper-inner, #sb-nav-previous, #sb-nav-next').mousedown(function(event) { 
            switch (event.which) {
            case 3:
                    alert('Sorry, our images are copyrighted.');
                    break;
            }
        });
    });
}
$("#product_photo").hover(function(){
  setTimeout(function (){
       $('div[id^=vZoomMagnifier], img[id^=alternate_product_photo_], .vCSS_img_product_photo, .vCSS_img_larger_photo, #product_photo, #sb-nav-previous, #sb-nav-next, ').click(function(event){
        setTimeout(function (){
          imageClickerz( )
          }, 800); 
        });
   }, 100); 
});

Answer 1

您很可能想要抓住上下文事件，最好相信它而不是右键点击，因为它还会包含触摸事件（例如，按住触摸来获取上下文）

$('#sb-wrapper-inner').on('ContextMenu contextmenu oncontextmenu', function(e) {
  e.preventDefault();
  alert('Sorry, our images are copyrighted.');
  return false;
});

Answer 2

不是显示警告并使用JavaScript，而是在图片顶部放置一个div，同样有效但侵入性较小。顺便说一下，你根本无法阻止人们下载他们在你网站上看到的任何东西..

Answer 3

$( ".sb-wrapper-inner.protected" ).on('contextmenu', function(event) {
  switch (event.which) {
    case 3:
      alert('Sorry, our images are copyrighted.');
      event.preventDefault();
      break;
  }
});

您也可以查看此HTML代码段，可能看起来像您的

<div class="wrapper">
  <div class="sb-wrapper-inner protected">
  <img src="http://www.lftechnology.com/media/images/home_feature_notebook_bg.png" alt="" />
  </div>
  <div class="sb-wrapper-inner">
    <img src="http://www.lftechnology.com/media/images/clients_interac.png" alt="" />
  </div>

  <div class="sb-wrapper-inner protected">
  <img src="http://www.lftechnology.com/media/images/home_feature_notebook_bg.png" alt="" />
  </div>
</div>

the respective code pen link is here

Answer 4

对于任何感兴趣的人，这是我纠正问题的方法：我将全局变量设置为0，然后在调用函数后将变量设置为2。如果变量等于0或2，则函数中的代码将正常运行。然后，我用if语句包围了其他单击事件，因此只有在变量为0时它们才会运行该函数。因此，防止多次调用该函数，并允许每次右键单击图像时弹出窗口。< / p>

var clicked = 0;
function imageClickerz( ) {
    if(clicked === 0 || 2) {
         $('#sb-wrapper-inner, #sb-nav-previous, #sb-nav-next').mousedown(function(event) {
            switch (event.which) {
            case 3:
                    confirm('Sorry, our images are copyrighted.');
                    break;
            }
        clicked = 2;
        });
    }
}
$("#product_photo").hover(function(){
  setTimeout(function (){
       $('div[id^=vZoomMagnifier]').click(function(event){
        setTimeout(function (){
                  if (clicked === 0 ) {
          imageClickerz( )
                  } else {console.log("its done dude")}
          }, 800); 
        });
   }, 100); 
});
$('img[id^=alternate_product_photo_], .vCSS_img_product_photo, .vCSS_img_larger_photo, #product_photo, #sb-nav-previous, #sb-nav-next, ').click(function(event){
        setTimeout(function (){
                  if (clicked === 0 ) {
          imageClickerz( )
                  } else {console.log("its done dude")}
          }, 800); 
});

Answer 5

在所有这些功能之前创建一个变量var hasSeenAlert = false。然后将mousedown函数回调设置为仅在hasSeenAlert为假时执行。

$('#sb-wrapper-inner, #sb-nav-previous, #sb-nav-next').mousedown(function(event) { 
    if(hasSeenAlert === false){
        switch (event.which) {
        case 3:
                alert('Sorry, our images are copyrighted.');
                break;
        }
        hasSeenAlert = true
    }
});

Javascript警报重复

5 个答案: