在鼠标单击时触发Hammer.js拖动/滑动行为 [英] Triggering Hammer.js drag/slide behavior on mouse click

问题描述

我正在使用Hammer.js来允许在窗格之间拖动。我还想允许一个替代动作，其中还有一个下一步按钮，您可以单击（使用鼠标）或触摸（在触摸屏上），这将自动将幻灯片设置为下一个屏幕的动画。

I'm using Hammer.js to allow for dragging between panes. I also want to allow an alternate action where there's also a "Next" button you can click on (with a mouse) or touch (on touchscreen), that will automatically animate a slide to the next screen.

想象一下 Hammer.js轮播演示，页面中间有一个下一步按钮。当你点击它时，就好像你做了一个滑动来带你到下一个窗格。

Imagine the Hammer.js Carousel demo with a "next" button in the middle of the page. When you click, it acts as if you did a slideleft to take you to the next pane.

我想我应该可以用以下内容触发：

I figured I should be able to trigger with something like:

var hammertime = Hammer('button.next-button').on("tap", function(event) {
    self.next();        
});

这似乎只是让我的鼠标进入拖动模式，而不是执行整个动画。

That only seems to put my mouse into drag mode, rather than executing the whole animation.

推荐答案

我遇到了同样的问题。 self.next（）显然不起作用，因为下一个函数没有在self元素中定义。

I've run into the same problem. self.next() will evidently not work as the next function is not defined in the self element.

你需要启动一个新的轮播实例，然后调用showPane （索引）方法：

You need to initizalize a new carousel instance, and then call the showPane(index) method:

      var hammertime = Hammer(doubletapRegion).on("tap", function (event) {
          console.log(event);
          var carousel = new Carousel("#carousel");
          carousel.init();
          carousel.showPane(1);
      });

此代码将移动第二个窗格（index = 1） 。你当然可以在那里放一个变量。

This code will move the the second pane (index = 1). You can of course put a variable there.

这篇关于在鼠标单击时触发Hammer.js拖动/滑动行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！