JQuery: Disable click event

Question

I want to disable all click events on my page but some of events are still getting called, suppose I have html as below

<div id='parent'>
    <table>
        <tr>
            <td><input type = 'text'/></td>
            <td><select><option>A</option><option>B</option></select></td>
            <td><a href='#' onclick="alert('Called')">Click </a></td>
        </tr>
        <tr>
            <td>dscsdcd</td>
            <td>dscsdcd</td>
            <td>dscdscdsc</td>
        </tr>
        <tr>
            <td>sdcdsc</td>
            <td>dssdcdsc</td>
            <td><input type='submit' value='Button'/></td>
        </tr>
    </table>
</div>

And script as below

$('#parent').click( function(e)
{
     e.stopPropagation();
     e.preventDefault();
     e.stopImmediatePropagation();
     return false;
});

when I click anchor tag, it alerts Called which it shouldn't because I am disabling event for it's parent. Looks like anchor tag is overriding onclick, if it is then how to prevent it? if not, then what could be the solution?

JS Fiddle

events propagate UP from a to the parent. so events tidied to a will fire first. — BenG
– BenG, Commented Oct 27, 2015 at 13:28
@ThinkDifferent but if it was other element then? basically I want to disable it for any element under that div. — Imad
– Imad, Commented Oct 27, 2015 at 13:29
@BG101 thanks for information, but can I disable that behavior? because this scenario is quit practicle. — Imad
– Imad, Commented Oct 27, 2015 at 13:30
Just added a plugin below which allows you to disabled (remove) and enable (re-add) click events for both onclick and jquery click. — BenG
– BenG, Commented Oct 27, 2015 at 15:19

Ronen Cypis · Accepted Answer · 2015-10-27 13:36:55Z

5

Just remove the onclick attribute from elements that have it, and unbind the 'click' event using .off('click') method

$('#parent *[onclick]').removeAttr('onclick').off('click');

answered Oct 27, 2015 at 13:36

Ronen Cypis

21.5k1 gold badge22 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Imad Over a year ago

if I want to enable click again, can I do it programmatically?

BenG Over a year ago

This is removing, not disabling.

Ronen Cypis Over a year ago

@Imad, you can just bind it again using .on('click'...)

Ronen Cypis Over a year ago

@BG101, check it before commenting, the .removeAttr() removes the attribute, and then the .off('click') unbinds the click event.

hsz · Accepted Answer · 2015-10-27 13:34:12Z

1

onclick attribute has a higher priority here. You can loop your <a> elements and unset this attribute:

$('#parent a').each(function () {
  $(this).attr('onclick', '');
}).click(function () {
  // ...
});

answered Oct 27, 2015 at 13:34

hsz

153k63 gold badges268 silver badges320 bronze badges

2 Comments

Imad Over a year ago

if I want to enable click again, can I do it programmatically?

hsz Over a year ago

Store $(this).attr('onclick') value and assign it back.

BenG · Accepted Answer · 2016-02-02 14:40:48Z

try this plugin to temporary disable onclick AND jQuery click events:-

$.fn.disableClick = function (disable){
    this.each(function() {
        if(disable){
            if(this.onclick)
                $(this).data('onclick', this.onclick).removeAttr('onclick');
            if($._data(this, 'events') && $._data(this, 'events').click)
                $(this).data('click', $.extend(true, {}, $._data(this, 'events').click)).off('click');
        }
        else{
            if($(this).data('onclick'))
                this.onclick = $(this).data('onclick');
            if($(this).data('click'))
                for(var i in $(this).data('click'))
                    $(this).on('click', $(this).data('click')[i].handler);
        }
    });
    return this;
};


//disable clicks
$('#parent *').disableClick(true);

//enable clicks
$('#parent *').disableClick(false);

DEMO

nagiyevel · Accepted Answer · 2015-10-27 13:30:51Z

0

If you want to disable it for any element under that div you must type:

$('#parent *').click( function(e)
{
     e.stopPropagation();
     e.preventDefault();
     e.stopImmediatePropagation();
     return false;
});

answered Oct 27, 2015 at 13:30

nagiyevel

4345 silver badges16 bronze badges

3 Comments

BenG Over a year ago

this is not guaranteed, as it depends what order events are bound to an element

Imad Over a year ago

@BG101 means it is not possible to prevent child clicks through parent?

nagiyevel Over a year ago

No, you can prevent child clicks through parent. @BG101 say in this case you must be carefully with order of events are bound to an element.

mahyard · Accepted Answer · 2015-10-27 14:15:45Z

0

There is an attribute you should use to make all things disabled.

var nodes = document.getElementById("parent").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++) {
     nodes[i].disabled = true;
}

Unfortunately disable is not valid with anchor tags.

There you should use :

var nodes = document.getElementById("parent").getElementsByTagName('a');
for(var i = 0; i < nodes.length; i++) {
  nodes[i].onclick = function(e){
    e.preventDefault();
    // YOUR CODES HERE
  }
}

try to combine these two methods according to your needs

answered Oct 27, 2015 at 14:15

mahyard

1,2501 gold badge13 silver badges39 bronze badges

Collectives™ on Stack Overflow

JQuery: Disable click event

5 Answers 5

4 Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related