Обнаружение щелчка на / вне изображения не работает

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");
});

РЕДАКТИРОВАТЬ: это предполагает, что вам нужно только обнаружить щелчок изображения.Если вам также нужно обнаружить щелчок без изображения, это решение не будет работать.