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

编辑：这假设您仅需要检测图像单击。如果还必须检测到非图像，则此解决方案将无法使用。

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

2 个答案: