jquery event bubbling and mobile :active hacks -

i'm fixing :active states of buttons on mobile page so:

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

this delegation/bubbling approach works great, because i'm doing lots of dynamic page manipulation , don't want have re-apply hack.

however, have additional code this:

$('a#myanchor').click(function(e){     e.preventdefault();     //     return false; }); 

this of course prevents first block working :( there elegant solution this?

i know can re-apply hack #myanchor, that's ugly.

is there way prevent clicking <a> causing navigation, allowing click event still propagate dom?

bonus: can prevent other explicit click handlers attached #myanchor firing, still allow propagation dom?

you've sorted now, it's annoying seeing unanswered questions when looking solution, i'll add answer anyway. handling body events through single event function not work out, maybe custom handlers in array checks after? like:

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

and then:

var actions = [];  var handleinteraction = function(event){    // check event type    // action based on event type    // check other actions handlers action    // check if event target in actions    // .call() / .apply() .handler actions matching action }; var handlemyanchor = function(event){     //     return false; }; actions.push({ target: '#myanchor', handler: handlemyanchor }); 

perhaps not best way, should work. expand handleinteraction each time there more specific , check event.target.
@ least way there lot less event handlers flying around through code.