在 panend hammer.js 上获取平移方向并限制方向

Question

我正在使用 hammer.js library with its jQuery plugin。我按照文档的建议开始使用它，所以像这样在 .game-card-mobile divs

上启动它

/* Create Hammer object for swipable game cards */
var $gameCard = $('.game-card-mobile');
var $gameCardTouch = $gameCard.hammer();

$gameCardTouch.on("panright press panleft", function(ev) {
    console.log(ev.type);
});

这允许我将可用操作限制为向右、向左的 pan/swipe 元素并按下它，但是在一个事件中，假设 panright 我会在控制台中打印出许多条目虽然只进行了一次平底锅。所以我然后将启动更改为：

$gameCardTouch.on("panend", function(ev) {
    console.log(ev.type);
});

现在它监听在动作结束时发生的 panend 动作，因此只在控制台中返回一个打印输出，但是现在它总是 panend，因此我失去了对 only 的限制3 个先前的操作，但我无法检测到执行了哪些具体操作。

有没有办法将这些结合起来，这样我就可以打印出 panright 如果用户向右滑动，panleft 如果向左滑动并按下，一旦他们完成该操作，所有这些都只打印一次？

Answer 1

我在我的 phone 上，所以这只是伪代码，但你能不能这样做：

var eventHandlers =  {
    panright: function(){},
    press: function(){},
    panleft:function(){}
}

 $gameCardTouch.on("panright press panleft", function(ev) {
      if(ev.type === 'panright') {
         eventHandlers.panright();
      } else if((ev.type === 'panleft'){
         eventHandlers.panright();
      } else {
       eventHandlers.press();
      }

网站上的这个例子类似：http://codepen.io/jtangelder/pen/ABFnd

Answer 2

只需将 panright、press 和 panleft 与 panend 组合使用即可。

(function(){
    var direction;
    var $gameCard = $('.game-card-mobile');
    var $gameCardTouch = $gameCard.hammer();

    $gameCardTouch.on("panright press panleft", function(ev) {
        //Set the direction in here
        direction = ev.type;
    }); 

    $gameCardTouch.on("panend", function(ev) {
        //Use the direction in here
        //You know the pan has ended
        //and you know which action they were taking

        console.log(direction);

        //So do what ever here
        if(direction === "whatever") ...
    }); 


}());

Answer 3

进一步说明 Jack 的意思。也许更简单的解决方案...

ev.eventObject returns 整数值 https://hammerjs.github.io/api/#event-object

在ev.direction的情况下：

没有移动 = 0
左 = 2
右=4
向上 = 8
向下 = 16
水平=6
垂直 = 24
全部=30

清洁

var mc = new Hammer(body);

mc.on("panend", function(ev) {

  if (ev.direction == INT) {
    //do something
  }

});

详细

var mc = new Hammer(body);

mc.on("panend", function(ev) {

  //console.log(ev.direction);

  //for left case
  if (ev.direction == 2) {
    //do something
  }

  //for right case
  if (ev.direction == 4) {
    //do something
  }
});

Answer 4

正在使用 Backbone、jQuery 和 Hammer 解决类似问题。这是我解决它的方法（只发布相关位）。希望有人觉得这有用。

var Slideshow = Backbone.View.extend( {

    events: {
        "pan .slideshow-slide" : "handlePan",
        "panstart .slideshow-slide" : "handlePanStart",
        "panend .slideshow-slide" : "handlePanEnd",
    },

    state: {
        panHistory: [],
    },

    handlePanStart: function( evt ) {
        // attempt to get the pan x coord
        var startX = this.getPanXFromEvent( evt );

        // if an x coord couldn't be retrieved, get out
        if ( !startX ) {
            this.logger.warn( "Pan Start: Unable to find x", evt );
            return;
        }

        this.logger.log( "Pan Start", evt );

        // set the pan x array so this is its first and only element
        this.state.panHistory = [ startX ];
    },

    handlePan: function( evt ) {
        // cache the pan history
        var pans = this.state.panHistory,
        // get the x coord from this pan event
        lastX = this.getPanXFromEvent( evt );

        // track deltas on the x axis during the pan, so we know if the user
        // is switching directions between pan start and pan end
        if ( lastX ) {
            pans.push( lastX );
        }
    },

    handlePanEnd: function( evt ) {
        // get the direction of the pan
        switch ( this.getDirectionFromPanEvent( evt ) ) {
            case Hammer.DIRECTION_LEFT:
                // if we panned left and the next slide isn't out of
                // range, go to the next slide.. otherwise fall back
                // on the switch statement's default
                if ( !this.isOutOfRange( this.state.current + 1 ) ) {
                    this.logger.log( "Pan End: Moving Left", evt );
                    this.gotoNextSlide();
                    return;
                }

            case Hammer.DIRECTION_RIGHT:
                // if we panned right and the previous slide isn't out
                // of range, go to the previous slide.. otherwise fall
                // back on the switch statement's default
                if ( !this.isOutOfRange( this.state.current - 1 ) ) {
                    this.logger.log( "Pan End: Moving Right", evt );
                    this.gotoPrevSlide();
                    return;
                }

            // Snap back to the current slide by default by calling
            // gotoSlide on the current index to reset the transform
            default:
                this.logger.log( "Pan End: Snapping Back", evt );
                this.gotoSlide( this.state.current );
        }
    },

    getPanXFromEvent: function( evt ) {
        return Utils.getValue( "originalEvent.gesture.center.x", evt );
    },

    getDirectionFromPanHistory: function( evt ) {
        // placeholders for start, end, and last pan x coords
        var i, start, last, end,
        // cache the pan x array so we don't have to type it 50 times
        pans = this.state.panHistory;

        // if there aren't enough pans to calculate a delta, return 0
        if ( pans.length < 2 ) {
            return 0;
        }

        // get the starting pan x
        start = pans[ 0 ];
        // set last and end to the last pan x
        last = end = pans[ pans.length - 1 ];

        // loop backwards through the pans to find a pan x coord different from the ending one
        // since there's a chance that identical pan x coords will be stacked in the array
        for ( i = pans.length - 2; last === end && i >= 0; i-- ) {
            last = pans[ i ];
        }

        // if the last pan was to the right, and we're farther right
        // than we started, move right
        return end > last && end > start ? Hammer.DIRECTION_RIGHT
            // if the last pan was to the left, and we're farther left
            // than we started, move left
            : end < last && end < start ? Hammer.DIRECTION_LEFT
            // otherwise move nowhere
            : 0;
    },
} );

在 panend hammer.js 上获取平移方向并限制方向

Get pan direction on panend hammer.js and restrict directions

javascript

jquery

hammer.js