Question

我正在使用 hammer.js 库及其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);
});

这允许我限制可用的操作以向右，向左平移/滑动元素并按下它，但是在一个事件中，让我们说panright我会在控制台中打印出许多条目，尽管只有一个平底锅表演了。所以我接着改变了这个：

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

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

有没有办法将这些组合在一起所以如果用户向右滑动，我会得到panright的打印件，如果向左滑动则按panleft并按下，一旦完成该动作，只需一次？< / p>

Answer 1

只需将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 2

扩大杰克的目标。也许是一个更简单的解决方案...

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

在ev.direction的情况下：

no movement = 0
left = 2
right = 4
up = 8
down = 16
horizontal = 6
vertical = 24
all = 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 3

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

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 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上获取平移方向并限制方向

4 个答案: