0

.mainその場で追加できる動的コンテンツのリストが含まれています。クラスで無効にする.mainこともできます。.disable無効にすると、すべてのコンテンツ項目がクリックされたくない。

クリックされた後にクラスを検出するためにハックを使用していることを以下に示します。親が特定のクラスを持っている場合、子DOMイベントを拾わないようにjQueryのCSSセレクターを構成する方法はありますか? たぶん何らかの方法ですが、私はその方法を理解できませんでした。.disable.main.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なるたびに、クリック イベントのバインドを解除します。しかし、これはそうするための最適またはベストプラクティスですか?adisable

更新 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

.disablecssを持つクラスがある場合、divのすべてのクリックイベントを無効にすることができます：

.disable
{
    pointer-events: none;
}

この方法では、div 内の何もクリックできません。

jsフィドル

IEの場合、IE 10以下はpointer-events. ただし、レイヤー機能を使用してこれをバイパスする方法については、すばらしい記事が書かれています: http://www.vinylfox.com/forwarding-mouse-events-through-layers/

これがあなたの言いたいことだと思います。

于 2013-11-12T08:38:49.953 に答える