Setting attribute disabled on a SPAN element does not prevent click events

Question

I have a <span> element which does something on a click event.

When I disable it, using jQuery:

$("span").attr("disabled", true); 

The event handler continues to be called when I click on the span element.

I am testing in Chrome 13. Any thoughts?

Answer 1

Try this:

$("span").css("pointer-events", "none"); 

you can enabled those back by

$("span").css("pointer-events", "auto"); 

Answer 2

The disabled attribute is not global and is only allowed on form controls. What you could do is set a custom data attribute (perhaps data-disabled) and check for that attribute when you handle the click event.