CODEWITHSUNDEEP
javascriptjquery
user3326265
user3326265

Reputation: 257

Events in touch screen

i have bind an mousemove and mousedown event to a div element, as below. In firefox, the event get triggers each time when i moved my finger over the div element. but in ie/chrome, the event gets triggered only for first time when i touch the div, moving the finger continuously over the div, doesnt trigger the event as in firefox.

this._on(this.element, 'mousemove', this.chartMouseMove);
this._on(this.element, 'mousedown', this.chartMousedown);

Note: Mouse event are triggered(moving mouse pointer triggers the event), only the touch is not working(moving fingers doent work).

I want the mousemove to get trigger, when i moved the finger

Thanks in advance

Upvotes: 0

Views: 140

Answers (1)

Alvaro
Alvaro

Reputation: 41605

For touch devices you should use touchmove and touchStart.

this._on(this.element, 'touchmove', this.chartMouseMove);
this._on(this.element, 'touchstart', this.chartMousedown);

And if you want to make it compatible with Windows Phone, then you should also add MSPointerDown and MSPointerMove:

this._on(this.element, 'touchmove MSPointerMove', this.chartMouseMove);
this._on(this.element, 'touchstart MSPointerDown', this.chartMousedown);

If you need to deal with Windows 8 touch devices, then you would need to work with addEventHandler instead of with on.

this.element.addEventListener("MSPointerMove", this.chartMouseMove);
this.element.addEventListener("MSPointerDown", this.chartMousedown);

Also, you will need to apply the following style in your body:

body{
    -ms-touch-action: none;
}

If you don't mind using plugins for it, I would recommend you to make use of hand.js to make it simple :)

Upvotes: 2

Related Questions