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

Question

我有 .main，其中包含可以动态添加的动态内容列表。 .main 也可以使用 .disable 类来禁用。当它被禁用时，我不希望所有内容项都被点击。

您可以在下面看到，我正在使用 hack 在单击 .main 后检测 .disable 类。有没有办法为 jQuery 构造 CSS 选择器，以避免在父级具有特定类时拾取子级 DOM 事件？也许是某种 .main:not(.disable) 但我不知道如何实现。

代码: http://jsfiddle.net/qhoc/99rjU/

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>

Javascript:

$('.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');
});

我在考虑其他不干净的替代品:

1. 像这样执行整个 body 点击事件 $('body').on('click', '.main:not(.disable) ul li', function ()但是这个很丑啊!每次点击都要扫描全身

2. 解绑 li 每次 a 触发调用 disable 的点击事件。但这样做是最佳实践还是最佳实践？

更新 1:

所以实际上在我的元素中我只想禁用列表中的a。由于还有其他 buttons 和 div 我仍然想触发事件。但是，看起来使用这个行不通

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

这是此 http://jsfiddle.net/qhoc/99rjU/2/ 的链接

看起来这仍然是实验性的，不能用于 anchor 标签？？

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Answer 1

当 div 具有类 .disable 和 css 时，您可以禁用所有点击事件:

.disable
{
    pointer-events: none;
}

这样 div 中的任何内容都不可点击。

jsFiddle

对于 IE，它在某种程度上更难，因为 IE 10 及更低版本不支持 pointer-events。然而，有一篇关于如何使用层函数绕过此问题的精彩文章:http://www.vinylfox.com/forwarding-mouse-events-through-layers/

我希望这就是你的意思。