是否有可能在餘燼視圖中添加新事件

我有一個小應用程序，用戶可以在舞臺上放置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) 
     }); 
    } 
    // ... 
});

有兩個問題：

，如果我綁定事件到$這個元素，的div都不能拖動了（可能是鼠標按下事件默認阻止）。如果我委託事件（如代碼所示），div是可拖動的，但事件將在整個文檔中觸發。
如果放置更多的div，事件會被觸發多次。

因此，我認爲，最聰明的解決方案是教燼，有更多的事件來處理比

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

我想實現的情況下（處理），如下圖所示：

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

如果有更簡單的方法來實現這一點，隨時發佈它們。感謝

更新：

更改選擇「$這個」爲「 '＃' + $這個[0] .ID」解決了問題，但它似乎是一個非常骯髒的解決方案。

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

所以還是有，如果有可能教燼新事件的問題。

來源

2014-06-24 lukkysam

這不是我真正想要的，因爲我必須在每個視圖中執行此「解決方法」。但現在，這個解決方案正常工作：

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); 
     } 
    }); 
}

來源

2014-06-26 08:28:52 lukkysam

@lukkysam，檢查出我的項目，燼錘，用於Ember.js整合Hammer.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 
    } 
    } 
});

來源

2014-07-08 20:14:16 chriswessels

是否有可能在餘燼視圖中添加新事件

回答

相關問題