Stopping Famo.us GestureHandler event propagation on mobile

Question

Famo.us' GestureHandler doesn't seem to be catching on mobile devices. Even with the very simple test:

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
var GestureHandler = require('famous/components/GestureHandler');

FamousEngine.init();

var scene = FamousEngine.createScene();
var rootNode = scene.addChild();

var backgroundNode = rootNode.addChild();
var backgroundElement = new DOMElement(rootNode, {
    classes: ['background'],
});

var gestures = new GestureHandler(rootNode);

gestures.on('drag', function(e) {

    console.log(e);

    .
    .
    .

});

the drag gesture callback is firing on desktop when you drag with the mouse, but in a mobile browser dragging just scrolls the document around.

The event passed to the callback, e in my example, is a custom famous thing and doesn't have the usual .stopPropagation method.

What gives?

score 1 · Answer 1 · answered Jul 25 '15 at 18:40

Turns out the answer had nothing to do with the event handling. Inside my event handler I was creating a few variables using ES6's new destructuring syntax:

var [x, y] = node.getPosition();

and while my code is being "babelified" and this works perfectly on desktop browsers, it was failing on iOS.

The issue also described here:

https://github.com/babel/babelify/issues/22

The solution is just to do it the old fashioned way...

:(

Stopping Famo.us GestureHandler event propagation on mobile

1 Answers1