How to prevent Dojo swipe gesture from bubbling?

Question

I have a seemingly simple question, but I can't seem to figure out where I'm going wrong. My skills are admittedly lacking in Dojo, so please excuse my naivety.

What I'm trying to accomplish : I have an element in the DOM that I want to respond to swipe and click events. However, when the swipe.end event is triggered, the click event is being fired also. I've tried to prevent the bubbling of the event (I'm assuming that the event is bubbling in this case), by calling stopPropagation and outright calling event.stop on the event, to no avail. You can see a code snippet below, or check out a working fiddle .

HTML

<div id='testSwipe'>Swipe Me</div>​

JS

require({
}, [ 
    'dojo/dom', 
    'dojox/gesture/swipe',
    'dojo/on',
    'dojo/_base/event'
], function(dom, swipe, on, event) {
    var div = dom.byId('testSwipe');

    on(div, swipe.end, function(e) {
        console.log("### SWIPE");

        e.stopPropagation();  // Click event still fires
        event.stop(e);  // Click event STILL fires
    });

    on(div, 'click', function(e) {
        console.log("### CLICK");
    });
});

In this example, swiping the event will cause the following output:

### SWIPE
### CLICK

Any suggestions? ​

Answer 1

The problem is two different events are being fired: an event (with event.type == 'swipe' ) for the swipe and a mouseEvent for the click. The events aren't bubbling.

One way of achieving what you want is to block the click event if the swipe.end event has just fired. It feels like a bit of a hack, but works. See updated JSFiddle .

As a side note: it seems the Dojo way to prevent bubbling is to use dojo.stopEvent(e) as per the docs . I did try this, but as expected it had no effect.

Answer 2

The click event will always fire when you click on the element. Instead of using click event you can use tap gesture using dojox/gesture/tap

on(div, tap, function(e) {
    console.log("### CLICK");
});

updated the fiddle