CODEWITHSUNDEEP
javascriptjquerytouch
user3326265
user3326265

Reputation: 257

Mouse and touch Events for varies browser and devices

i am having div element in a page and binded the following events

/

/ for ie9, safari, mozilla
    this._on(this.element, "mousedown", this.chartMouseDown);
    this._on(this.element, "mouseup", this.chartMouseUp);
    this._on(this.element, 'mousemove', this.chartMouseMove);

  // for chrome
      this._on(this.element, 'touchmove', this.chartTouchMove);
      this._on(this.element, 'touchstart', this.chartTouchClick);
      this._on(this.element, 'touchend', this.chartTouchClick);

    if (window.navigator.msPointerEnabled) {
            this._on(this.element, 'MSPointerMove', this.chartMouseMove);
            this._on(this.element, 'MSPointerDown', this.chartMouseClick);
        }

On touching the div and continousous move, the div have to move according to my finger position on the page. This working fine in firefox, chrome, safari, but not in IE browser (dragging the div using mouse is working, by touch it is not working).

i have used the following code in all the mouse handler: for example.

chartMouseMove: function (e) {
        e.stopPropagation();
        e.preventDefault();
        e.returnValue = false;
        e.cancelBubble = true;
}

On moving the div using touch support, the entire page is moving up and down in IE browser, the default action is taking place, whether i missed any thing for IE browser?

Please explain how to handle touch and mouse event for varies browser and devices(mobile|tablet|android).

Thanks in advance

Upvotes: 0

Views: 238

Answers (2)

Alvaro
Alvaro

Reputation: 41595

Apart from what @Dieter said, you will need to use addEventHandler instead of $(document).on for Windows 8 devices as I pointed out the other day in your question.

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

And then add:

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

Upvotes: 1

Dieterg
Dieterg

Reputation: 16368

Have you tried adding the -ms-touch-action style?

To improve the performance of touch interactions, it is now required that you add to the intended touch target a CSS property that disables the default touch actions.

#touchTarget {
-ms-touch-action: none;
}

More info: http://blogs.msdn.com/b/ie/archive/2011/10/19/handling-multi-touch-and-mouse-input-in-all-browsers.aspx

Upvotes: 1

Related Questions