Question

我有一个小应用程序，用户可以在舞台上放置div。

这些div必须是可拖动的（并且可以调整大小）（通过jQuery UI），当用户与div交互时（通过hammer.js），还应该触发事件选择。

目前的实施：

App.DdView = Ember.View.extend({
    // ...
    didInsertElement: function (arg) {
        // some logic
        var $this = this.$();
        $this
            .draggable(/*...*/)
            .resizable(/*...*/);

        //delegate
        $(document).hammer().on("tap hold swipe", $this, function (e) {
            console.log(e.type)
        });
    }
    // ...
});

有两个问题：

如果我将事件绑定到$ this元素，则div不再可拖动（可能默认阻止了mousedown事件）。如果我委托事件（如代码所示），div可以拖动，但事件将在整个文档中触发。
如果放置了更多div，则会触发多个事件。

所以我想，最聪明的解决方案就是教授余烬，要处理的事件要多于

'click', 'doubleClick', 'contextMenu' ...

我想实现事件（处理程序），如下所示：

App.DdView = Ember.View.extend({
    tap: function(){},
    hold: function(){},
    pinch: function(){},
    // ...
});

如果有更简单的方法来实现这一点，请随意发布它们。感谢

更新

从＆＃34; $ this＆＃34;更改选择器到＆＃34;＆＃39;＃＆＃39; + $ this [0] .id＆＃34;解决问题，但似乎是一个非常肮脏的解决方案。

$(document).hammer().on("tap hold swipe", '#'+$this[0].id, function (e) { ... });

所以还有一个问题是，是否可以教授新活动。

Answer 1

这不是我想要的，因为我必须在每个视图中执行此“解决方法”。但就目前而言，这种解决方案运行良好：

var hammerEvents = ["touch", "release", "gesture", /* ... */];


didInsertElement: function (arg) {
    /* ... */
    var emthis = this,
        $this = this.$(),
        touchEvents = hammerEvents.join(" ");
    $(document).hammer().on(touchEvents, '#' + $this[0].id , function (e) {
        if (typeof emthis.get(e.type) == "function") {
            emthis.get(e.type).call(emthis);
        }
    });
}

Answer 2

@lukkysam，查看我的项目，ember-hammer，将Hammer.js与Ember.js集成：https://github.com/chriswessels/ember-hammer

样本用法：

App.SomeView = Ember.View.extend({
  hammerOptions: {
    swipe_velocity: 0.5
  },
  gestures: {
    swipeLeft: function (event) {
      // do something like send an event down the controller/route chain
      return false; // return `false` to stop bubbling
    }
  }
});

是否可以在余烬视图中添加新事件

2 个答案: