0

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

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

4

2 回答 2

3

.disable好吧，当它具有带有css的类时，您可以禁用div上的所有点击事件：

.disable
{
    pointer-events: none;
}

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

jsFiddle

对于 IE 来说有点困难，因为 IE 10 及更低版本不支持pointer-events. 然而，一篇很棒的文章已经写了关于如何用层函数绕过这个：http: //www.vinyfox.com/forwarding-mouse-events-through-layers/

我希望这就是你的意思。

于 2013-11-12T08:38:49.953 回答
0 
$('.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');
});

那这个呢？

于 2013-11-12T08:55:50.653 回答