Touch based actions


I am developing an Ember.js application that will be run on touch devices. At this moment I am only targeting iOS devices (iPhone, iPad). When using an action, this action is not always triggered on the controller.

Example: the touchend action is always triggered when I log on jQuery’s on('touchEnd') event. The toggleDepartments controller action is not always triggered.

<button {{action 'toggleDepartments' bubbles=false}}>
  <img src="hamburger.png" />

When I add specify the type of event and add on=touchEnd, the action is always triggered and feels very snappy.

<button {{action 'toggleDepartments' bubbles=false on=touchEnd}}>
  <img src="hamburger.png" />

Is there a way that I can specify every action must act on the touchEnd event?


I’m curious to know the answer to this one as well. I’d wager that it would have to do with reopening Ember.Controller or something.


It doesn’t look like you’ll be able to change the default as it’s hard-coded to be a click event by default.

It might be worth making a component to do this…syntax will be a little different in Handlebars, but the result is more or less the same:

// components/touch-action.js
export default Ember.Component.extend({
  action: null,
  touchEnd: function() {
    return false;

// templates/
{{#touch-action 'toggleDepartments' tagName='button'}}
  <img src="hamburger.png" />


I use fastclick transform touch events into tap events, then map the tap event onto click event handlers in Application.

// ... snip ...
var App = Ember.Application.extend({
  customEvents: {
    tap: 'click'
// ... snip ...

Now you just hit 2 birds with one stone: fast tap action (no 300ms delay) and action trigger by tap.


Great, this solution does work!

My issue was related to the combined use with ember-hammer. The issue and the solution is visible here:


If you’re using ember-cli I’ve built ember-mobiletouch to be a drop-in lib to add full gesture support to your app.