How do I get touch events (Hammer) on general HTML elements?

Question

I have a DIV inside a page element of a sliding menu / navigator. I'm trying to capture Hammer events on this element but am only able to access "touch" events.

var hammer = Hammer(getElementById('myDiv'));
hammer.on('touch swipe', function(e){
   console.log(e); 
});

Is there something I'm missing, or does Onsen UI set specific things with Hammer that is interfering?

check this related topic http://stackoverflow.com/questions/4755505/how-to-recognize-touch-events-using-jquery-in-safari-for-ipad-is-it-possible — jjpcondor, Jun 17 '14 at 20:02

score 1 · Accepted Answer · answered Jun 19 '14 at 02:19

Did you cancel default touch event? It worked for me.

var element = document.querySelector('.your-div');

element.ontouchmove = function(event) {
    if (!event.elementIsEnabled) {
        event.preventDefault();
    }
};

element.ontouchstart = function(event) {
    if (!event.elementIsEnabled) {
        event.preventDefault();
    }
};

element.ontouchend = function(event) {
    if (!event.elementIsEnabled) {
        event.preventDefault();
    }
};

var hammertime = Hammer(element).on("swiperight", function(event) {
    //do stuff
});

Thanks. I think this makes sense. From the above I found that adding .hammer({prevent_default: true}) worked. Is this because the events are already being captured and stop propagating? — Tarwin Stroh-Spijer, Jun 20 '14 at 17:52

How do I get touch events (Hammer) on general HTML elements?

1 Answers1