Question

使用Jquery-ui sortable doesn't work on touch devices based on Android or IOS中的代码示例触摸在iOS设备上启用jQuery UI可排序，在注册knockout.js点击处理程序以及在相同元素上排序的jQuery UI时会出现问题。 knockout.js处理程序不会在启用触摸的设备上启动，但会在台式机/笔记本电脑上启动。

添加一个名为的标记已移动，可以跟踪触发点击处理程序的时间，标记为下面的// TRIGGER HERE：

/*
 * Content-Type:text/javascript
 *
 * A bridge between iPad and iPhone touch events and jquery draggable,
 * sortable etc. mouse interactions.
 * @author Oleg Slobodskoi
 *
 * modified by John Hardy to use with any touch device
 * fixed breakage caused by jquery.ui so that mouseHandled internal flag is reset
 * before each touchStart event
 *
 */
(function( $ ) {

  $.support.touch = typeof Touch === 'object';

  if (!$.support.touch) {
      return;
  }

  var proto =  $.ui.mouse.prototype,
  _mouseInit = proto._mouseInit
  moved = true;

  $.extend( proto, {
    _mouseInit: function() {
      this.element
      .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
      _mouseInit.apply( this, arguments );
    },

    _touchStart: function( event ) {
      if ( event.originalEvent.targetTouches.length != 1 ) {
        return false;
      }

      this.element
      .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
      .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

      this._modifyEvent( event );

      $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
      this._mouseDown( event );

      moved = false;

      return false;
    },

    _touchMove: function( event ) {
      this._modifyEvent( event );
      this._mouseMove( event );
      moved = true;
    },

    _touchEnd: function( event ) {
      this.element
      .unbind( "touchmove." + this.widgetName )
      .unbind( "touchend." + this.widgetName );
      this._mouseUp( event );
      if (! moved) {
        // TRIGGER HERE
      }
    },

    _modifyEvent: function( event ) {
      event.which = 1;
      var target = event.originalEvent.targetTouches[0];
      event.pageX = target.clientX;
      event.pageY = target.clientY;
    }

  });

})( jQuery );

问题是，如何从jQuery UI触发点击事件到knockout.js？

我已尝试this.element.click()，this.element.get().click()，this.element.trigger("click")等无济于事。

更新

将代码破解为：

跟踪实际目标，因为html.element看起来不正确
触发正确目标上的点击事件

现在它可以与knockout.js的点击事件一起使用。

/*
 * Content-Type:text/javascript
 *
 * A bridge between iPad and iPhone touch events and jquery draggable,
 * sortable etc. mouse interactions.
 * @author Oleg Slobodskoi
 *
 * modified by John Hardy to use with any touch device
 * fixed breakage caused by jquery.ui so that mouseHandled internal flag is reset
 * before each touchStart event
 *
 */
(function( $ ) {

  $.support.touch = typeof Touch === 'object';

  if (!$.support.touch) {
      return;
  }

  var proto =  $.ui.mouse.prototype,
  _mouseInit = proto._mouseInit
  moved = true,
  currentTarget = null;

  $.extend( proto, {
    _mouseInit: function() {
      this.element
      .bind( "touchstart." + this.widgetName, $.proxy( this, "_touchStart" ) );
      _mouseInit.apply( this, arguments );
    },

    _touchStart: function( event ) {
      if ( event.originalEvent.targetTouches.length != 1 ) {
        return false
      }

      this.element
      .bind( "touchmove." + this.widgetName, $.proxy( this, "_touchMove" ) )
      .bind( "touchend." + this.widgetName, $.proxy( this, "_touchEnd" ) );

      this._modifyEvent( event );

      $( document ).trigger($.Event("mouseup")); //reset mouseHandled flag in ui.mouse
      this._mouseDown( event );

      moved = false;

      return false;
    },

    _touchMove: function( event ) {
      this._modifyEvent( event );
      this._mouseMove( event );
      moved = true;
    },

    _touchEnd: function( event ) {
      this.element
      .unbind( "touchmove." + this.widgetName )
      .unbind( "touchend." + this.widgetName );
      this._mouseUp( event );
      if (! moved) {
        $(currentTarget).click();
      }
    },

    _modifyEvent: function( event ) {
      event.which = 1;
      var target = event.originalEvent.targetTouches[0];
      currentTarget = target.target;
      event.pageX = target.clientX;
      event.pageY = target.clientY;
    }

  });

})( jQuery );

Answer 1

在您发布的代码中，您从touchstart事件返回false。在启用触控功能的设备中，touchstart事件会先触发，click会在约300毫秒后触发。

如果从事件处理程序返回false，则与调用event.preventDefault()和event.stopPropagation()相同，因此touchstart实际上取消了点击。这不是桌面上的问题，因为touchstart永远不会触发。

http://jsfiddle.net/madcapnmckay/HkbwV/2/

可能的解决方案。

而不是返回false只需调用event.stopPropagation（）（如果可行）。使用事件绑定绑定touchstart而不是单击。

<div data-bind="event : { touchstart: somfunction }"></div>

在您标记的位置触发事件绑定订阅的自定义事件。

您也可以考虑编写一个touchOrClick自定义绑定，用于检测touchstart是否可用并选择性地绑定到它或点击事件。

希望这有帮助。

触发从jQuery UI到knockout.js的click事件

1 个答案: