Prevent mousemove events on children elements that are absolutely positioned

Question

Prevent mousemove events on children elements that are absolutely positioned

Exploring the intricacies of the mousemove event when it comes to absolute elements.

To showcase my findings, I have created a demo on Codepen.

The challenge is to capture the mousemove event on the #main element without affecting any of its absolutely positioned children.

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 message = "Mouse move ";
  message += e.pageX + ", " + e.pageY;
  $( "#output" ).html(message);
});

});

javascript css dom mousemove

Answer 1

Answer №1

To prevent event handling for specific targets, you can simply identify the target in your event handler and exit the function early if it is one of those that should be blocked.

In this setup, it involves checking whether the target matches the #main element or jQuery's $event.currentTarget.

$('#main').on('mousemove', function(e) {
  // only interested in #main events
  // disregard events on other targets
  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>

Answer 2

To prevent event handling for specific targets, you can simply identify the target in your event handler and exit the function early if it is one of those that should be blocked.

In this setup, it involves checking whether the target matches the #main element or jQuery's $event.currentTarget.

$('#main').on('mousemove', function(e) {
  // only interested in #main events
  // disregard events on other targets
  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>

Prevent mousemove events on children elements that are absolutely positioned

Answer №1

Similar questions

Link with javascript onClick attribute

Could a complex, intricate clipping path be created using CSS 3?

The div is inexplicably shifting downward once the first three rows are shown correctly

Loading views and controllers on-the-fly in AngularJS

Discovering digits within a given text using a specific pattern and modifying them using JavaScript

Place a div element on top of the others by using the onClick() event to "dock" it

The JQuery TextNTags plugin eliminates tag formatting once the trigger syntax has been modified

Is there a way to trigger a function when the close button (cross icon) is clicked for an introjs-react step?

Modify a particular entry that is being looped through in PHP

What are the steps to manipulate third party API data with the Node.js 'Request' module, prior to transmitting it to the frontend?

Ensuring Vue.js correctly re-renders an array item

When the previous textbox is filled, the cursor will automatically move to the button

"Troubleshooting: jQuery Find function not functioning correctly with HTML template

Twitter typeahead not functioning properly when used in conjunction with ajax requests

Firebase version 9 - Retrieve the content of a referenced document

Is there a glitch in Safari's CSS involving max-height?

Switching back regular text from a superscript in document.execCommand

Having trouble with sharing feature in React Native for Android and iOS platforms?

The button component is unresponsive

Tips for choosing an image using jQuery from an external HTML page