1

使用来自 Jquery-ui sortable 的代码示例在基于 Android 或 IOS 的触摸设备上无法在 iOS 设备上触摸启用 jQuery UI sortables，注册 knockout.js 点击处理程序以及 jQuery UI sortable 时出现问题在相同的元素上。knockout.js 处理程序不会在启用触摸的设备上触发，但会在台式机/笔记本电脑上触发。

添加一个名为moved的标志可以跟踪何时需要触发点击处理程序，标记// 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 );
4

1 回答 1

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 是否可用并有选择地绑定到它或 click 事件。

希望这可以帮助。

于 2012-06-06T22:50:52.717 回答