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浏览器的任何东西？

请解释如何处理各种浏览器和设备（手机|平板电脑|安卓）的触摸和鼠标事件。

提前致谢

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

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

2 个答案: