Ignore mousemove on children

Question

Out of interest, I tried to write a range slider to understand how this should work, but I ran into a problem:

 var slider = document.querySelector('.slider'); var button = document.querySelector('.button'); slider.addEventListener('mousemove', function(e) { var lg = document.querySelector('.cursor'); lg.innerHTML = 'Координаты мыши: ' + e.offsetX; });

 .slider { background: blue; height: 30px; width: 500px; } .button { background: red; height: 30px; width: 30px; margin-left: 96px; }

 <div class="slider"> <div class="button"></div> </div> <hr> <div class="info"> <span class="cursor"></span> </div>

It should work like this: I move the cursor over the slider block, and the mousemove event mousemove moves the button block.

The problem is that when you hover over a button block, an event occurs on it. Is there a way to ignore hovering on a button while continuing to generate an event on the slider ?

If not, in what other way should the button block be moved inside the slider ?

Rostyslav Kuzmovych Rostyslav Kuzmovych 3,873 one 12 21 · Accepted Answer · 2017-09-16T07:33:01

You have a problem not in generating an event, but in that you take e.offsetX , but when you hover over the button at e get a button, that is, I suggest taking the coordinates from the document and removing the offset from the left from them:

 var slider = document.querySelector('.slider'); var button = document.querySelector('.button'); slider.addEventListener('mousemove', function(e) { var lg = document.querySelector('.cursor'); lg.innerHTML = 'Координаты мыши: ' + (e.clientX - slider.offsetLeft); });

 .slider { background: blue; height: 30px; width: 500px; } .button { background: red; height: 30px; width: 30px; margin-left: 96px; }

 <div class="slider"> <div class="button"></div> </div> <hr> <div class="info"> <span class="cursor"></span> </div>

But this did not eliminate my interest in whether it is possible to implement event handling in such a way that it would follow the coordinates of the slider, even if the cursor is over a button.
@TryCatch as for me, so the event will remain the one that is and can be changed only as we get the coordinates

Ignore mousemove on children

1 answer 1

More articles: