1

かなり複雑な UI を構築しましたが、その一部を無効にして、1 つ (再有効化ボタン) を除くすべての子要素をクリックできないようにしたいと考えています。

親に無効 を追加し、classクリックをチェックするために親にリスナーを設定していますが、子要素のイベントが委任されていないため、親のクリック ハンドラーがトリガーする前にトリガーされるため、バブリングを停止できません。 .

私の理解では、キャプチャフェーズを使用することは実際にはオプションではないので、別のアプローチはありますか?

無効な状態を削除するには、親内のボタンをクリックできるようにする必要があるため、新しい HTML 要素 (オーバーレイ) を上に平手打ちしたくありません。

すべての子要素のクリック ハンドラーを代わりに委任を使用するように書き直して、親だけがクリック イベントをリッスンするようにする必要がありますか?

[より多くの説明とコード例で更新] サイトのセクションごとに異なる、動的に読み込まれるパネルがあります。読み込まれると、ページ固有のスクリプトが実行され、イベントがパネル内のさまざまな要素に接続されます。これには、リンクとフォーム、および jeditable 要素 (DOM の通常のスパン) が含まれます。HTML の例:

<div class="infoPanelContent" id="detailSection">
<h1><span>
    Details 
    <a class="sprite-icons flag" title="Flag" data-recordid="123123" href="/tickets/flag">Flag</a>
</span></h1>
<ul class="flexCol">
    <li>
        <h3>Status:</h3>
        <span id="setStatus">
            <span data-recordid="123123" data-projectid="104824" id="status" class="editWithSelect" title="Click to edit...">Open</span>
            <input type="text" class="hidden" maxlength="50" placeholder="New Status">
        </span>
    </li>
</ul>

<!-- Responsiblity -->
<h1><span>
    Responsibility</span>
    <a data-orientation="left" title="Add people" href="/tickets/responsible?r=123123" class="toggleAddNew sprite-buttons iconAdd">Add people</a>
</h1>
<ul class="singleCol">
    <li>
        <p>Mel L.</p>
        <a class="sprite-buttons iconRemove" data-itemid="432432" data-recordid="123123" data-projectid="104824" href="/tickets/delete-responsible">Delete</a>
    </li>
</ul>
<h1>
<span>Attachments</span>
<a data-orientation="left" title="Add attachments" href="/tickets/attachments?r=123123" class="toggleAddNew sprite-buttons iconAdd">Add attachments</a>
</h1>
<ul class="singleCol attachments">
    <li>
        <p><a target="_blank" href="http://www.test.com"><span class="sprite-icons iconFiletypeIMG"></span><em>Sample (60 KB)</em></a></p>
    </li>
</ul>

<p class="centerButton"><a data-delete="Delete Ticket" data-restore="Restore Ticket" class="sprite-buttons btnBlueLight" title="" data-recordid="123123" data-projectid="104824" href="/tickets/delete" id="deleteTicket"><strong class="sprite-buttons">Restore Ticket</strong></a></p>

機能がフックされた要素の例は$(".flag")、など$("#status")です$(".toggleAddNew")。クリック可能にする必要がある項目の 1 つは、下部にある削除ボタン (アンカー タグ) です。この HTML はページによって異なる場合があることに注意してください。アンカーのクリックを委任する場合、問題はありませんが、委任されたイベントを使用して設定できないため、問題になるのは実際には合理的なものです。リスナーを追加して伝播を停止し、デフォルトの動作を停止してfalseを返そうとしました$("#infoPanel *").click( ... )が、アイテムのイベントハンドラーが最初に実行されるため、機能しません。通常、その 1 つのボタンがなければ、全体にオーバーレイを配置して 1 日と呼びます。

4

3 に答える 3

1

ここで何をしたいのか完全にはわかりませんが、私が理解している限り、子要素の1つを除いて、親要素のすべての子孫をクリックできないようにしたいと考えています。

親要素でクラスを「無効」にしておくことを計画していると仮定します。

$('.disabled').find(':not(.enable_button)').on('click', function() {
    return false;
});

これは、クリック可能にしたい子要素にクラス「enable_button」を配置できることも前提としています。クラスを使用したくない場合は、それを識別する方法があると確信しています。

ユーザーが再度有効にするボタンをクリックすると、このハンドラーが削除されます。

于 2012-11-16T18:40:59.143 に答える
1

子要素のハンドラーでこれを行います。

if ($(this).parent().is(".disabled")) {
    return false;
}

または、「親」がさらに先祖を意味する場合は、次のようにします。

// In the child element's handler...
if ($(this).parents(".disabled").length) {
    return false;
}

イベントのバブリングを引き続き許可する場合は、ステートメントfalseから削除します。return

コメントに記載されているように、.closest()代わりにを使用すると、最初の祖先が見つかっ.parents()たらテストを停止できるため、わずかに良い結果が得られる場合があります。.disabled

于 2012-11-16T18:31:10.717 に答える
0

jEditable のメソッドの組み合わせを使用してこれを解決し、無効なパネル内の要素 (復元ボタンを除く) に直接.editable('disabled')ハンドラーを追加しました。パネルに登録されます。これにより、無効化/有効化をグローバルにし、各セクションのコードをよりクリーンにすることができました。abutton

于 2012-11-20T23:43:51.790 に答える