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”，但实际上我已经禁用了其父元素的事件。看起来锚点标签正在覆盖“onclick”事件，如果是这样，如何防止它？如果不是，那么解决方案可能是什么？ JS Fiddle

- Imad

---

它应该是 $('#parent a').... - Think Different

事件从 a 向上传播到父级。因此，与 a 相关的事件将首先触发。 - BenG

@ThinkDifferent 但如果它是其他元素呢？基本上我想禁用该div下的任何元素。 - Imad

@BG101 谢谢您的信息，但我能否禁用这种行为？因为这种情况相当实用。 - Imad

刚刚添加了一个插件，可以让你禁用（删除）和启用（重新添加）onclick和jquery click的点击事件。 - BenG

Answer 1

只需从具有 onclick 属性的元素中删除该属性，并使用 .off('click') 方法取消绑定 'click' 事件即可。

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

- Ronen Cypis

---

如果我想要再次启用点击，我可以通过编程实现吗？ - Imad

这是删除，而不是禁用。 - BenG

@Imad，你可以再次使用.on('click'...)来绑定它。 - Ronen Cypis

@BG101，在发表评论之前请检查一下，.removeAttr()会移除属性，然后.off('click')会解绑点击事件。 - Ronen Cypis

Answer 2

onclick 属性在此具有更高的优先级。您可以循环遍历 <a> 元素并取消设置该属性：

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

- hsz

---

如果我想要再次启用点击，我可以通过编程实现吗？ - Imad

存储 $(this).attr('onclick') 的值并重新赋值。 - hsz

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

演示

- BenG

Answer 4

如果您想禁用该 div 下的任何元素，您必须键入：

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

- nagiyevel

---

这并不是保证的，因为它取决于事件绑定到元素的顺序。 - BenG

@BG101表示无法通过父元素来阻止子元素的点击？ - Imad

不，您可以通过父元素防止子元素的点击。@BG101说，在这种情况下，您必须小心绑定到元素的事件顺序。 - nagiyevel

Answer 5

有一个属性你应该使用，可以使所有东西都无法使用。

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

很遗憾，对于锚点标签，禁用（disable）属性无效。

你应该使用：

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

根据您的需求尝试将这两种方法结合起来使用

- mahyard