Question

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

您可以在下面看到我在点击.disable后使用 hack 来检测.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');
});

我在想其他不洁的替代品：

整个body点击此事件$('body').on('click', '.main:not(.disable) ul li', function()，但这个非常难看！它必须在每次点击时扫描整个身体
每次li触发呼叫a时，取消绑定disable点击事件。但这是最佳或最佳做法吗？

更新1 ：

所以实际上在我的项目中我只想禁用列表中的a。由于还有其他buttons和divs我还想触发事件。但是，看起来使用它将无法正常工作

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

以下是此http://jsfiddle.net/qhoc/99rjU/2/

看起来这仍然是实验性的，不适用于锚标记？

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

Answer 1

你可以在div上使用css类.disable时禁用div上的所有点击事件：

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

这个怎么样？

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

2 个答案: