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

Question

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

你可以看到下面，我用劈检测.disable下课.main被点击。 有没有一种方法可以构造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. 每次触发a调用disable时，取消绑定li click事件。 但这是最佳做法还是最佳做法？

更新1 ：

所以实际上在我的项目中，我只想禁用列表中的a 。 由于还有其他buttons和divs ，我仍然要触发事件。 但是，使用此功能似乎无效

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

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

看起来这仍处于实验阶段，无法在锚标记上使用？？

https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

Answer 1

好吧，当它具有使用CSS的类.disable时，您可以在div上禁用所有click事件：

.disable
{
    pointer-events: none;
}

这样，div内的所有内容均不可点击。

jsFiddle

对于IE来说，要困难一些，因为IE 10及以下版本不支持pointer-events 。 但是，关于如何使用层函数绕过它的文章很不错： http ： //www.vinylfox.com/forwarding-mouse-events-through-layers/

我希望这就是你的意思。

Answer 2

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

那这个呢？