在div内检测点击的问题

Question

我正在尝试检测div中的点击。 这是我的示例代码：

<div  id="target">
E' importante ricordare che le attività di trading comportano alti rischi di perdita del capitale investito. Il nostro consiglio è quello di investire la sola cifra che si è disposti a perdere per "scommettere" su quelle valute che riteniamo incrementeranno moltissimo il loro valore sul medio-lungo termine.

<!-- /21735472908/PDF_viewer_leaderboard_PDF -->
<div id="div-gpt-ad-1536529845958-0">
<script>
googletag.cmd.push(function() { googletag.display('div-gpt-ad-1536529845958-0'); });
   setInterval(function(){googletag.pubads().refresh([slot5]);}, 60000);
</script>
</div>
</div>


<script>
$(function() {
  $("document").click(function(e) {
    if (e.target.id == "target" || $(e.target).parents("#target").length) {
      alert("Inside div");
    } 
  });
})
</script>

碰巧可以很好地检测到div内的点击，但未检测到位于div内的广告单元的点击！就像广告覆盖了div。

有什么解决办法吗？如果没有，我可以使用不同的代码，例如，检测定义像素坐标的某个身体区域中的点击。

谢谢

Answer 1

您可以使用elementFromPoint()来实现您的方法。

这是一个简单的演示。

$(document).click(function(e) {
  let target = e.target;
  if (target.id == "target" || $(target).parents("#target").length) {
    alert("Inside div");
  }
  else {
    target.hidden = true;
    let ele = document.elementFromPoint(e.clientX, e.clientY);
    target.hidden = false;
    if (ele.id == "target" || $(ele).parents("#target").length) {
      alert("Inside div");
    }
  }
});

#target {
  position: absolute;
  top: 0;
  width: 100px;
  height: 50px;
  background: blue;
  opacity: 0.3;
}

#ad {
  position: absolute;
  top: 0;
  width: 100px;
  height: 100px;
  background: red;
  opacity: 0.3;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="target">
  <div class="child">
    <div class="child">
    </div>
  </div>
</div>

<div id="ad"></div>

Answer 2

.mouseover（）：

将事件处理程序绑定到“ mouseover” JavaScript事件，或在元素上触发该事件。

.hover（）：源

将一个或两个处理程序绑定到匹配的元素，以在鼠标指针进入和离开元素时执行。

调用$（selector）.hover（handlerIn，handlerOut）的简写为：$（selector）.mouseenter（handlerIn）.mouseleave（handlerOut）;

.mouseenter（）：

绑定要在鼠标进入元素时触发的事件处理程序，或在元素上触发该处理程序。

mouseover在指针也移入子元素时触发，而mouseenter仅在指针移入绑定元素时触发。

这是什么意思

因此，.mouseover（）与.hover（）不同，出于相同的原因，.mouseover（）与.mouseenter（）不同。

$('selector').mouseover(over_function) // may fire multiple times

//进入和退出函数每次进入和退出每个元素仅被调用一次

$('selector').hover(enter_function, exit_function)

HTML

<div id="outer">
  Outer
  <div id="inner">
    Inner
  </div>
</div>
<div id="other">
  Trigger the handler
</div>
<div id="log"></div>

示例：

$( "#outer" ).mouseover(function() {
  $( "#log" ).append( "<div>Handler for .mouseover() called.</div>" );
})