Question

我正在修复移动网页上的:active按钮状态，如下所示：

$('body').on('touchstart', 'a', function (e) {
    $(this).addClass("active");
}).on('touchend touchcancel click', 'a', function (e) {
    $(this).removeClass("active");
});

这种委托/冒泡方法效果很好，因为我正在进行大量的动态页面操作，而且我不想不断地重新应用这个黑客。

但是，现在我有一些额外的代码：

$('a#MyAnchor').click(function(e){
    e.preventDefault();
    // do something
    return false;
});

这当然会阻止第一个块工作:(对此有优雅的解决方案吗？

我知道我可以重新应用hack #MyAnchor，但那很难看。

有没有办法阻止点击<a>导致导航，但是允许点击事件仍在DOM中传播？

额外奖励：我是否还可以阻止附加到click的其他显式#MyAnchor处理程序触发，但仍允许向DOM传播？

Answer 1

您现在可能已对此进行了排序，但在寻找解决方案时看到未回答的问题很烦人，所以无论如何我都会添加一个答案。但是通过一个单独的事件函数来处理身体事件会不会有效，并且可能会在一个数组中自定义处理程序进行检查？所以喜欢：

$('body').on('touchstart touchend touchcancel click', 'a', HandleInteraction);

然后：

var actions = [];

var HandleInteraction = function(event){
   // check event type
   // do action based on event type
   // check other actions handlers for action
   // check if event target is in actions
   // .call() / .apply() .handler from actions matching action
};
var HandleMyAnchor = function(event){
    // do something
    return false;
};
actions.push({ target: '#MyAnchor', handler: HandleMyAnchor });

也许不是最好的方式，但它应该有效。您甚至可以在每次更具体的情况下展开HandleInteraction并查看event.target 但至少通过这种方式可以减少通过代码传播的事件处理程序。

jquery事件冒泡和移动：活跃的黑客

1 个答案: