鼠标和触摸各种浏览器和设备的事件

Question

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

Answer 1

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

Answer 2

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;
}