javascript - 适用于不同浏览器和设备的鼠标和触摸事件

Question

我在页面中有 div 元素并绑定(bind)了以下事件

/

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

触摸 div 并连续移动时，div 必须根据我的手指在页面上的位置移动。这在 firefox、chrome、safari 中工作正常，但在 IE 浏览器中不起作用(使用鼠标拖动 div 可以工作，通过触摸则不起作用)。

我在所有鼠标处理程序中使用了以下代码:例如。

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

使用触摸支持移动 div 时，整个页面在 IE 浏览器中上下移动，正在发生默认操作，我是否错过了 IE 浏览器的任何操作？

请解释如何处理不同浏览器和设备(手机|平板电脑|android)的触摸和鼠标事件。

提前致谢

Answer 1

您是否尝试过添加 -ms-touch-action 样式？

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

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