5

I just want to enable / disable onclick and href on elements (a or div).

I don't know how to do this.

I can disable onclick by adding an handler on click event, but the href is still available.

 
$(this).unbind().click(function(event){
     event.preventDefault();
     return;
});

Edit FOUND A HACK FOR A ELEMENTS


if ($(this).attr("href")) {
     $(this).attr("x-href", $(this).attr("href"));
     $(this).removeAttr("href");
}
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
jibees
  • 546
  • 2
  • 4
  • 17
  • It's a pretty vague question. What is it exactly you're trying to do? Remove the `href` property as well? – Klemen Slavič Jan 07 '11 at 13:33
  • Ok, sorry ;) I just want to be able (by clicking on a button), to disable / enable all the links (click or href) over elements (div or a) – jibees Jan 07 '11 at 13:40

5 Answers5

6

If you return false on the onclick event, the href is irgnored.

  1. This will go to Goole: <a href="http://www.google.com" onclick="alert('Go to Google')">Test</a>

  2. This will not go to Google: <a href="http://www.google.com" onclick="alert('Go to Google'); return false;">Test</a>

wosis
  • 1,209
  • 10
  • 14
5

Ok i've found a workaround : putting an overlay over the main div containing all the elements i wanted to disable .. It just works.

jibees
  • 546
  • 2
  • 4
  • 17
2

You could try the following:

$('a, div').click(
    function(e){
    return false;
        // cancels default action *and* stops propagation

    // or e.preventDefault;
       // cancels default action without stopping propagation
});

MDC documentation for preventDefault, jQuery documentation for event.preventDefault.

SO question: JavaScript event.preventDefault vs return false.

I'm unsure as to the problem of the "href still being available," since the click event is cancelled; however if you want to remove the href from a elements:

$('a[href]').attr('href','#');

will remove them (or, rather, replace the URL with a #).


Edited in response to comment (to question) by OP:

Ok, sorry ;) I just want to be able (by clicking on a button), to disable / enable all the links (click or href) over elements (div or a)

$('#buttonRemoveClickId, .buttonClassName').click(
function() {
    $('a, div').unbind('click');
});
$('#buttonReplaceClickId, .buttonOtherClassName').click(
function() {
    $('a, div').bind('click');
});
Community
  • 1
  • 1
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • I've found a solution for the a elements (which consist of placing the href value into a x-href attributes to re-enable it). But how can I re-enable the onclick handler ? – jibees Jan 07 '11 at 13:48
1

Try this to disable click:

$(this).unbind('click');

Diablo
  • 3,378
  • 1
  • 22
  • 28
0

You can set the href attribute directly to "" to prevent the original from showing up in the status bar, if that's what you're asking.

$(this).unbind().click(function(event){
     event.preventDefault();
}).attr("href", "");

Otherwise, a event.preventDefault() already stops links from being clickable.

David Tang
  • 92,262
  • 30
  • 167
  • 149