Javascript 警报重复

Question

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

我的脚本如下：

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 sn-p，可能看起来像你的

<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 时运行该函数。因此防止该函数被多次调用，并允许每次右键单击图像时显示弹出窗口。

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 为 false 时执行。

$('#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
    }
});