javascript - JQuery: Disable click event - Stack Overflow

admin管理员组

文章数量:1277393

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

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

• javascript
• jquery
• html

Share Improve this question Follow asked Oct 27, 2015 at 13:26 ImadImad 7,4901414 gold badges6262 silver badges122122 bronze badges 5

• 1 it should be $('#parent a').... – Think Different Commented Oct 27, 2015 at 13:28
• 1 events propagate UP from a to the parent. so events tidied to a will fire first. – 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 Commented Oct 27, 2015 at 13:29
• @BG101 thanks for information, but can I disable that behavior? because this scenario is quit practicle. – 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 Commented Oct 27, 2015 at 15:19

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 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');

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 () {
  // ...
});

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

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;
});

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 bine these two methods according to your needs

本文标签： javascriptJQuery Disable click eventStack Overflow