Избегайте перемещения мышью по абсолютно расположенным дочерним элементам - PullRequest
Новая
       8

Избегайте перемещения мышью по абсолютно расположенным дочерним элементам

0 голосов
/ 17 января 2019

Я пытаюсь понять mousemove Событие на абсолютных элементах.

Я сделал Codepen , чтобы продемонстрировать, что я хотел.

Мне нужно, чтобы перемещение мыши было зафиксировано на элементе # main , но не на любом из его дочерних элементов, которые расположены абсолютно.

HTML: 

<div id="main">
  <div class="btn">Click Me</div>
</div>
<div id="output">

</div>

JS: 

$(document).ready(function(){

  $('#main').on('mousemove',function( e ) {
  var msg = "mouse move ";
  msg += e.pageX + ", " + e.pageY;
  $( "#output" ).html(msg);
});

});

1 Ответ

0 голосов
/ 17 января 2019

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

В текущей конфигурации это то же самое, что и проверка, является ли цель действительно #main, a.k.a jQuery's $ event.currentTarget . 

$('#main').on('mousemove', function(e) {
  // here we only want the events of #main
  // so any other target is irrelevant
  if (e.target !== e.currentTarget) return;
  var msg = "mouse move ";
  msg += e.pageX + ", " + e.pageY;
  $("#output").html(msg);
});
$('#main').on('mouseout', function() {
  $("#output").html('');
});
$('#main>.btn').on('click', e=> $("#output").html('can still click'));
#main {
  float: left;
  background: yellow;
  width: 400px;
  height: 400px;
  position: relative;
}

#main .btn {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 2;
  border: 0;
  background: blue;
  color: #FFF;
}

#main .btn .innerbtn {
  padding: 10px;
}

#output {
  display: inline-block;
  background: #efefef;
  width: 200px;
  position: absolute;
  right: 0;
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="main">
  <div class="btn">
    <div class="innerbtn">Click Me</div>
  </div>
</div>
<div id="output">

</div>
...