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

Answer 1

只需从包含该属性的元素中删除onclick属性，然后使用.off('click')方法取消绑定“点击”事件

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

Answer 2

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

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

Answer 3

尝试使用此插件临时禁用/和jQuery onclick事件： -

click

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

JQuery：禁用click事件

5 个答案: