0

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

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

这种委托/冒泡方法效果很好，因为我正在做很多动态页面操作，我不想不断地重新应用这个 hack。

但是，现在我有一些额外的代码，如下所示：

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

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

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

有没有办法防止点击<a>导致导航，但允许点击事件仍然传播到 DOM？

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

4

1 回答 1

0

您现在可能已经对此进行了排序，但是在寻找解决方案时看到未回答的问题很烦人，所以无论如何我都会添加答案。但是，通过单个事件函数处理正文事件是否可行，可能在它检查的数组中使用自定义处理程序？就像：

$('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.
但至少通过这种方式，在代码中飞来飞去的事件处理程序要少得多。

于 2013-08-06T09:57:17.327 回答