jQuery Mobile - preventDefault() on button (link)

Question

I'm developing jQuery Mobile (jQm) app.

I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.

I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.

I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)

As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?

Answer 1

$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
    event.preventDefault();
    event.stopImmediatePropagation();

The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).

This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.

I hope this helps.