检测图像的单击/外部不起作用

Question

我想检测图像上是否发生了点击：

var myImg = document.getElementById("my_img123");

//here I have some stuff that uses myImg



document.addEventListener("click", function(evt) {
  if (evt.currentTarget === myImg) {
    alert("click on image");
  } else {
    alert("click outside of image");
  }
});

无论我在哪里点击，它总是显示“点击图像外”

为什么？固定？

Answer 1

使用event.target而不是event.currentTarget。

currentTarget永远是document，因为这是听众所附着的地方。

target是发生在内部的最内元素事件

var myDiv = document.getElementById("div");

document.addEventListener("click", function(evt) {
  if (evt.target === myDiv) {
    console.log("click on div");
  } else {
    console.log("click outside of div");
  }
});

<br/>
<button>Test</button>
<br/><br/><br/>
<div id="div">Div instead of image<br/> More div content<br/></div>
<br/>
<button>Another button</button>

Answer 2

代替：

document.addEventListener("click", function(evt) {
   if (evt.currentTarget !== myImg) {
       alert("click on image");
   } else {
       alert("click outside of image");
   }
});

尝试：

myImg.addEventListener("click", function(evt) {
     alert("click on image");
});

编辑：这假设您只需要检测图像点击。如果您还必须检测非图像点击，则此解决方案将不起作用。