Question

我有一个看似简单的问题，但我似乎无法弄清楚我哪里出错了。我的技能肯定缺乏道场，所以请原谅我的天真。

我想要实现的目标：我在DOM中有一个元素，我想响应滑动和点击事件。但是，当触发swipe.end事件时，也会触发click事件。我试图阻止事件的冒泡（我假设事件在这种情况下冒泡），通过调用stopPropagation并在事件上直接调用event.stop，无济于事。您可以在下方看到代码段，或查看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");
    });
});

在此示例中，滑动事件将导致以下输出：

### SWIPE
### CLICK

有什么建议吗？

Answer 1

问题是两个不同的事件被触发：用于滑动的event（event.type == 'swipe'）和点击的mouseEvent。这些事件并没有冒泡。

实现所需内容的一种方法是在swipe.end事件刚刚触发时阻止click事件。这感觉有点像黑客，但有效。请参阅updated JSFiddle。

作为旁注：似乎Dojo防止冒泡的方法是按照the docs使用dojo.stopEvent(e)。我确实试过这个，但正如预期的那样它没有效果。

Answer 2

单击元素时，将始终触发click事件。您可以使用dojox/gesture/tap

轻击手势，而不是使用点击事件

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

更新了fiddle

如何防止Dojo轻扫手势冒泡？

2 个答案: