Javascript 单击具有父类条件的动态子DOM

我有

.main

，其中包含可以动态添加的动态内容列表。

.main

也可以使用

.disable

类禁用。禁用时，我不希望单击所有内容项

您可以在下面看到，我正在使用hack检测

。单击
.main
后禁用
类。是否有一种方法可以构造jQuery的CSS选择器，以避免在父级具有特定类时拾取子级DOMs事件？可能是某种
.main:not（.disable）
，但我不知道怎么做

代码：

HTML:

<div class="main">
    <div class="state">Enabled</div>
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>

<a class="btn" href="#">
Toggle State
</a>

$('.btn').on('click', function() {
    if ($('.main').hasClass('disable')) {
        $('.main').toggleClass('disable');
        $('.state').text('Enabled');
    } else {
        $('.main').toggleClass('disable');
        $('.state').text('Disabled');
    }
});

$('.main').on('click', ' ul li', function() {

    /* This is a hack
    if ($('.main').hasClass('disable'))
        return;
    */

    alert('Item is clicked');
});

我在想其他不干净的选择：

执行整个
body
click事件，像这样
$（'body'）。在（'click'，'）上。main:not（.disable）ul li'，function（）
但是这个非常难看！每次单击都必须扫描整个body

每次触发
a
调用
disable
时，解除绑定
li
单击事件。但这是最佳做法还是最佳做法

更新1：

因此，实际上在我的项目中，我只想禁用列表中的
a
。因为还有其他
按钮
和
divs
，所以我仍然希望触发事件。但是，看起来使用它不会起作用

.disable li a
{
    pointer-events: none;
}

这里是这个的链接

看起来这仍然是实验性的，对锚定标签不起作用

当div有类
时，您可以禁用div上的所有单击事件。使用css禁用
：

.disable
{
    pointer-events: none;
}

这样，div中的任何内容都不可单击


对于IE来说，这有点困难，因为IE 10及以下版本不支持
指针事件
。不过，已经有一篇很棒的文章介绍了如何使用层函数绕过此问题：

我希望这就是你的意思。
当它有类
时，你可以禁用div上的所有click事件。使用css禁用
：

.disable
{
    pointer-events: none;
}

$('.btn').on('click', function() {
    var main = $('.main');
    $('.state').text(main.hasClass('disable') ? 'Enabled' : 'Disabled');
    main.toggleClass('disable');
});

$('.main').on('click', 'li', function(e) {
    if ($(this).parents('.main.disable').length) {
        // actually this is similar to your alternative#1
        return;
    }
    alert('Item is clicked');
});

这样，div中的任何内容都不可单击


对于IE来说，这有点困难，因为IE 10及以下版本不支持
指针事件
。不过，已经有一篇很棒的文章介绍了如何使用层函数绕过此问题：

我希望这就是你的意思。
当它有类
时，你可以禁用div上的所有click事件。使用css禁用
：

.disable
{
    pointer-events: none;
}

$('.btn').on('click', function() {
    var main = $('.main');
    $('.state').text(main.hasClass('disable') ? 'Enabled' : 'Disabled');
    main.toggleClass('disable');
});

$('.main').on('click', 'li', function(e) {
    if ($(this).parents('.main.disable').length) {
        // actually this is similar to your alternative#1
        return;
    }
    alert('Item is clicked');
});

这样，div中的任何内容都不可单击


对于IE来说，这有点困难，因为IE 10及以下版本不支持
指针事件
。不过，已经有一篇很棒的文章介绍了如何使用层函数绕过此问题：

我希望这就是你的意思。
当它有类
时，你可以禁用div上的所有click事件。使用css禁用
：

.disable
{
    pointer-events: none;
}

$('.btn').on('click', function() {
    var main = $('.main');
    $('.state').text(main.hasClass('disable') ? 'Enabled' : 'Disabled');
    main.toggleClass('disable');
});

$('.main').on('click', 'li', function(e) {
    if ($(this).parents('.main.disable').length) {
        // actually this is similar to your alternative#1
        return;
    }
    alert('Item is clicked');
});

这样，div中的任何内容都不可单击


对于IE来说，这有点困难，因为IE 10及以下版本不支持
指针事件
。不过，已经有一篇很棒的文章介绍了如何使用层函数绕过此问题：

我希望这就是你的意思

$('.btn').on('click', function() {
    var main = $('.main');
    $('.state').text(main.hasClass('disable') ? 'Enabled' : 'Disabled');
    main.toggleClass('disable');
});

$('.main').on('click', 'li', function(e) {
    if ($(this).parents('.main.disable').length) {
        // actually this is similar to your alternative#1
        return;
    }
    alert('Item is clicked');
});

这个怎么样

这个怎么样

这个怎么样

这怎么办？
我看你的支票没有问题，但请注意你对另一个“不干净”选项的评论#1：“每次点击都必须扫描整个身体”不，它没有“扫描”整个身体。它钩住
body
元素上的点击，如果点击发生，它会查看点击通过的元素链（可能是，什么，3到10？）从
e.target
开始，然后继续到每个
parentNode
，直到它到达
body
。这在几微秒内就会发生。备选方案1在范围@HP方面也不理想：你说的是“也”，但同样，第一个问题不是问题。当然，范围问题是，我可能不会这样做。（顺便说一句：如果你有多个
.main
，黑客的代码是错误的。你可能想要
$（this）.closest（.main”）.hasClass（“disable”）
）来代替。）我看不出你的检查有什么问题，但请注意你对另一个“不干净”选项的评论1：“每次点击都必须扫描整个身体”不，不“扫描”整个身体。它钩住
body
元素上的点击，如果点击发生，它会查看点击通过的元素链（可能是，什么，3到10？）从
e.target
开始，然后继续到每个
parentNode
，直到它到达
body
。这在几微秒内就会发生。备选方案1在范围@HP方面也不理想：你说的是“也”，但同样，第一个问题不是问题。当然，范围问题是，我可能不会这样做。（顺便说一句：如果你有多个
.main
，黑客的代码是错误的。你可能想要
$（this）.closest（.main”）.hasClass（“disable”）
）来代替。）我看不出你的检查有什么问题，但请注意你对另一个“不干净”选项的评论1：“每次点击都必须扫描整个身体”不，不“扫描”整个身体。它钩住
body
元素上的点击，如果点击发生，它会查看点击通过的元素链（可能是，什么，3到10？）从
e.target
开始，然后继续到每个
parentNode
，直到它到达
body
。这在几微秒内就会发生。备选方案1在范围@HP方面也不理想：你说的是“也”，但同样，第一个问题不是问题。当然，范围问题是，我可能不会这样做。（顺便说一句：如果您有多个
.main
，黑客的代码是错误的。您可能需要
$（this）.nexist（.main”）.hasClass（“disable”）
）来代替。）