不同浏览器和设备的鼠标和触摸事件

Question

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

/

/ 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 样式？

为了提高触摸交互的性能，现在需要 您添加到预期的触摸目标的 CSS 属性禁用 默认的触摸动作。

#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

Answer 2

除了@Dieter 所说的，对于Windows 8 设备，您需要使用addEventHandler 而不是$(document).on 作为I pointed out the other day in your question。

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

然后加上：

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