6

I am building a simple Slider component. When a user clicks on the thumb he should be able to start dragging the thumb along the track. So at that point I am registering a mousemove event handler in my helper class:

startSliderDrag : function(component)
{
    console.log("register");
    document.addEventListener("mousemove", this.onSliderMouseMove.bind(this));
},

So far everything is working, but when I try to unregister the handler again (as a test case after invoking the first mouse move)

onSliderMouseMove : function(event)
{
    console.log("mousemove");
    document.removeEventListener("mousemove", onSliderMouseMove);
}

this has no effect and the handler is called forever. What am I doing wrong? Is there another option in the framework itself to react on mouse move?

5

Thanks to Doug who pointed me to the right direction, this works:

startSliderDrag : function(component)
{
    var self = this;
    var mouseMoveHandler = function(event) {
        console.log("move");
        self.anotherFunctionFromHelper(component);
    };

    var mouseUpHandler = function(event) {
        console.log("up");
        document.removeEventListener("mousemove", mouseMoveHandler);
        document.removeEventListener("mouseup", mouseUpHandler);
    };

    document.addEventListener("mousemove", mouseMoveHandler);
    document.addEventListener("mouseup", mouseUpHandler);
},

With that approach I keep the reference to the component and have access to the mouseEvent and can remove the listeners.

| improve this answer | |
  • Thanks, this helped me with a similar issue I was facing. I was trying to remove the event listener in the unrender method. This was much easier. – Ajinkya Phadnis Nov 26 '19 at 8:59
3

This is not a Lightning issue its at the DOM level and would happen in any web tech.

The key here from the doc https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

This means in the addEventListener() call you are specifying a different function than in the removeEventListener() call - these must be exact refs to the same thing.

The .onmousemove= approach would only work if you switch away from addEventListener() for the wire up.

| improve this answer | |
  • Good catch Doug. So what would be the best solution in that case? When I use addEventListener without bind I loose the component/helper reference (or is there a way back from a DOM event to the Lightning Component reference?) Or do you know if I could use one of the base classes from the framework on the component level to react on mousemove events? – Christian Menzinger Jun 3 '16 at 11:54
3

For me the solution was to create a reference to the bound function like this:

this.boundMouseMove = this.mouseMove.bind(this);

and then use this reference for add / remove eventlistener

addEventListener('mousemove', this.boundMouseMove, false);

...

removeEventlistener('mousemove', this.boundMouseMove);

This got rid of the nasty 'self' variable

| improve this answer | |
1

This would usually occur if the signature for your add and remove event listeners aren't the same (that does not seem to be the case though). It's more of a workaround and not an ideal solution but you can nullify the onmousemove property

element.onmousemove = null; // Replace it with your exact element name

Alternatively, you can try with other mouse events such as mouseover and mouseout to see the behaviour. For reference, the list of events for a rich text area field for lightning component are listed here.

| improve this answer | |
  • Thank you Gaurav for your suggestion, but unfortunately this has no effect neither. When I output document.onmousemove directly after adding the listener the value is still null as well when I output it in the handler function. I have no idea why. Same with other mouse events. – Christian Menzinger Jun 3 '16 at 9:34
  • Interesting, let me try it at my end to see what's going on – Gaurav Kheterpal Jun 3 '16 at 9:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.