jQuery：禁用單擊事件

Question

我想禁用我頁面上的所有單擊事件，但是某些事件仍在被調用，假設我有如下所示的html

<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>

和腳本如下

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

當我單擊錨標記時，它會向Called發出警告，因為我正在為其父項禁用事件，因此不應Called該Called 。 看起來錨標記覆蓋了onclick ，如果是那么如何防止呢？ 如果沒有，那么解決方案是什么？

JS小提琴

Answer 1

只需從具有onclick屬性的元素中刪除它，然后使用.off('click')方法將'click'事件解除綁定

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

Answer 2

在這里， onclick屬性具有更高的優先級。 您可以循環<a>元素並取消設置此屬性：

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

Answer 3

試試這個插件來臨時禁用onclick和jQuery click事件：-

$.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

Answer 4

您應該使用一個屬性來禁用所有功能。

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

不幸的是，禁用對錨標記無效。

在那里，您應該使用：

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

嘗試根據需要將這兩種方法結合起來

Answer 5

如果要對該div下的任何元素禁用它，則必須鍵入：

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