我只想启用右键单击图像

Question

我正在使用代码阻止右键单击我的博客。它适用于 may 网站并在我的网页上禁用 ctrl+v ctrl+c-右键单击 f12。但我想启用右键单击图像。我不知道该怎么做。但请帮助我。

var isCtrl = false;
document.onkeyup = function(e) {
  if (e.which == 17)
    isCtrl = false;
}

document.onkeydown = function(e) {
  if (e.which == 123)
    isCtrl = true;

  if (((e.which == 85) || (e.which == 65) || (e.which == 88) || (e.which == 67) || (e.which == 86) || (e.which == 2) || (e.which == 3) || (e.which == 123) || (e.which == 83)) && isCtrl == true) {
    alert('This is Function Disabled');
    return false;
  }
}

// right click code
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if (navigator.appName == "Netscape")
  document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);

function mischandler() {
  alert('This is Function Disabled');
  return false;
}

function mousehandler(e) {
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if ((eventbutton == 2) || (eventbutton == 3)) return false;
}

document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;

//select content code disable  alok goyal
function killCopy(e) {
  return false
}

function reEnable() {
  return true
}

document.onselectstart = new Function("return false")
if (window.sidebar) {
  document.onmousedown = killCopy
  document.onclick = reEnable
}

Answer 1

使用event.target 很容易，当鼠标进入/离开网页上的特定图像部分时，我们可以启用/禁用右键单击。

请看下面相同的演示

var isCtrl = false;
document.onkeyup = function(e) {
  if (e.which == 17)
    isCtrl = false;
}

document.onkeydown = function(e) {
  if (e.which == 123)
    isCtrl = true;

  if (((e.which == 85) || (e.which == 65) || (e.which == 88) || 
		(e.which == 67) || (e.which == 86) || (e.which == 2) || 
		(e.which == 3) || (e.which == 123) || (e.which == 83)) && isCtrl == true) {
    alert('This is Function Disabled');
    return false;
  }
}

// right click code
var isNS = (navigator.appName == "Netscape") ? 1 : 0;
if (navigator.appName == "Netscape")
  document.captureEvents(Event.MOUSEDOWN || Event.MOUSEUP);

function mischandler(e) {
  let target = $(e.target);
  if(!target.is('#img')) {
	  alert('This is Function Disabled');
	  return false;
  }
}

function mousehandler(e) {
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if ((eventbutton == 2) || (eventbutton == 3)) return false;
}

document.oncontextmenu = mischandler;
document.onmousedown = mousehandler;
document.onmouseup = mousehandler;

$('#img').on('mouseenter', function(e) {
	mischandler(e);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='https://www.w3schools.com/html/pic_mountain.jpg' id='img' alt='mountain.jpg' width='200' height='200'/>

希望，这对您来说很好。 :) :)

Answer 2

我更新了检查所选元素是否为图像的代码。使用事件对象我们可以检查所选元素的性质

function mischandler(e) { //change
    if(e.currentTarget.getAttribute("src")==null) //change
    {
        alert('This is Function Disabled');
        return false;
    }

}

function mousehandler(e) {
  var myevent = (isNS) ? e : event;
  var eventbutton = (isNS) ? myevent.which : myevent.button;
  if (((eventbutton == 2) || (eventbutton == 3)) && e.currentTarget.getAttribute("src")==null) //change
    return false;
}

Answer 3

使用 jQuery，我认为一个相当简单的解决方案是：

 $(document).on( "contextmenu", function(event) {
//if image allow normal browser behaviou
        if(event.target.tagName.toLowerCase() === 'img'){
            return true;
        }else{
//if any other event target prevent default
            event.preventDefault;
            alert("no right click");
            return false;
        }
    })