[Solved] JQuery: Disable click event

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

Enquirer: Imad

||

Solution #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 () {
  // ...
});
Respondent: hsz

Solution #2:

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');
Respondent: Ronen Cypis

Solution #3:

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

Respondent: BenG

Solution #4:

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

Respondent: mahyard

Solution #5:

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;
});
Respondent: nagiyevel

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Leave a Reply

Your email address will not be published.