Проблема с обнаружением кликов внутри 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 ():

Свяжите обработчик события с событием JavaScript "mouseover" или запустите это событие для элемента.

.hover (): источник

Привязать один или два обработчика к соответствующим элементам, которые будут выполняться, когда указатель мыши входит и покидает элементы.

Вызов $ (селектор) .hover (handlerIn, handlerOut) является сокращением для: $ (селектор) .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>" );
})