0

私のメニューは次のように機能します: 各メニュー項目 (例: 下の Menu Item One) は、<td>ANOTHER 内にネストされたテーブル内にあります<td>。その外側<td>には、いくつかの onclick イベント ハンドラー (ここでは "processMenuClick()" と呼ばれます) があります。

<td onClick="processMenuClick(<item-dependent-arguments>);">
    <table>
        <tr>
            <td class="innermenuitem">Menu Item One</td>
       </tr>
    </table></td>

特定の条件下で、メニューがクリックに反応しないようにしたい。これがどのように機能するかをテストするために、2 つのボタンを作成します。次のように、各<td>クラス「innermenuitem」にevent.stopPropagation を適用します。

<button onclick="javascript:stopit()">Test the disable menu functionality</button>

<script type="text/javascript">
function stopit()
{
    $("td.innermenuitem").click(function(event)
    {
        event.stopPropagation();
    })
}
</script>

これはうまくいくようです。ボタンをクリックすると、メニューがクリックに反応しなくなります。しかし、メニューを再度有効にしたいとします。クリック ハンドラーは、外側の でまだ邪魔されていません<td>。したがって、2 番目のボタンで、inner に適用した stopPropagation を無効にします<td>。それは理にかなっていますか？もしそうなら、それはどのように行われますか？

注: 上記により、メニューを無効にして再度有効にできるはずであり、アウター<td>をハンドラーに再バインドする必要はありません。「processMenuClick()」に渡される引数はサーバー上でのみ認識されるため、これは重要です。ハンドラーを再バインドする必要がある場合は、何らかのポストバックを通じてそれらを呼び出す方法を考え出す必要があります。しかし、<td>これを元に戻す方法があると仮定すると (そして、イベントが再びバブルアップするのを許可する)、私はゴールデンになる必要があります。しかし、他のスレッドを読むと、私が考えているようではなく、stopPropagation が 1 つのイベントにのみ使用されているように見えます。これは、基本的に<td>. 誰かが私を正すことができますか？(そしてうまくいけば私は問題を解決します。

パラグラム

4

2 に答える 2

1 
function startIt(){
     $('td.innermenuitem').off('click');
}

これを可能な限り単純にするために、onメソッドとバインドする必要があります。

function stopIt(){
    $('td.innermenuitem').on('click', function(event){
       event.stopPropagation();
    });
}
于 2012-09-24T05:19:46.883 に答える