CODEWITHSUNDEEP
eventsember.jscapturemousemove
Philip Kamenarsky
Philip Kamenarsky

Reputation: 2777

Capturing mouseMove event in ember.js

I'm trying to implement a slider view in ember.js; for that I would need to capture the mouseMove event even if it leaves the view that first received it. In pure js I would do something like this:

element.addEventListener 'mousemove', ..., true   // true means 'capture event'

This also has the nice side effect of having the event being fired on the capturing element even if the mouse leaves the browser window, mimicking the way UI controls behave in native applications.

I don't seem to be able to find a way to do that in ember.js but I'm sure I'm overlooking something. If not, then what is the recommended way of doing something like that?

Upvotes: 2

Views: 2123

Answers (2)

haitham
haitham

Reputation: 3536

An update for people viewing an old question. Now components contain a mouseMove and other event handlers built in, as well as the ability ability to add custom ones.

https://guides.emberjs.com/v2.12.0/components/handling-events/

import Ember from 'ember';

export default Ember.Component.extend({
    mouseMove() {
        //do stuff
    }
});

Upvotes: 3

Christopher Swasey
Christopher Swasey

Reputation: 10552

Unfortunately, the EventDispatcher, which handles setting up the default event handlers on the root element (typically body), does not do anything to scope mouseMove to to a view other than that in which it is actually happening.

You can look into onDrag, onDragStart, and onDragEnd (dragStart, drag, dragEnd in ember parlance) events which per spec should be fired on the source element, and thus fire on your view regardless of where they happen.

You CAN manually assign handlers to body yourself. Add handlers for mouseUp and mouseMove in a mouseLeave handler, and remove them in your mouseEnter (to prevent duplication) and mouseUp handlers.

The simplest way to do this would be to use on:

$('body').on('mouseMove.custom', $.proxy(this.yourHandler, this));

and then to remove:

$('body').off('mouseMove.custom')

Upvotes: 2

Related Questions