3

リスト内にリストがあります。ユーザーがリストアイテム（<li>）をクリックすると、ネストされた<ul>ものが表示されるようにします。ネストされたリストの追加を開始する前は、リストアイテムをクリックすると関数が実行される場所にありました。これで、ネストされたリストのいずれかをクリックすると、その関数も実行されます。それらはリストアイテムの一部であるため、これは理にかなっています。

リストアイテムの最初の部分をラップし<span>てその上で関数を実行する以外に、親で何かを実行<li>できるが、その子、特に子リストとリストアイテムでは実行できないセレクターはありますか？

HTML：

<ul class="buckets">        
    <li class="bucket">
        <img src="arrow_group_collapsed_true.png" class="arrow">
        <img src="blue_folder.png" class="folder">
        View all
    </li>

    <li class="bucket">
        <img src="arrow_group_collapsed_false.png" class="arrow">
        <img src="blue_folder.png" class="folder">
        Groups
        <ul style="display: block;">
            <li id="group_id_15036" class="group_bucket">
                <img src="arrow_group_collapsed_true.png" class="arrow">
                <img src="blue_folder.png" class="folder">
                Group 1
            </li>
            <li id="group_id_14910" class="group_bucket">
                <img src="arrow_group_collapsed_true.png" class="arrow">
                <img src="blue_folder.png" class="folder">
                Group 2
            </li>
        </ul>
    </li>
</ul>

Javascript（それほど多くはありませんが、必要に応じてもっと表示できます）：

$( 'li.bucket' ).live( 'click',
    function()
    {
        // do stuff
    })

「グループ」または「すべて表示」をクリックしてクリック機能を実行したいのですが、「グループ1」または「グループ2」をクリックしないでください。

4

3 に答える 3

11

公式の方法がありますが、あなたの場合、それはかなり高価かもしれません：

$('li.bucket *').live('click', function(event) { event.stopPropagation() });

のli子には、イベントが上方に伝播してli'sハンドラーをトリガーするのを停止するハンドラーが含まれるようになります。試してみて、アプリケーションの速度が低下しすぎていないかどうかを確認してください。

于 2010-07-27T17:46:22.090 に答える
2

上記の関数をリストアイテム上でマウスオーバーして制御し、アイテムのマウスアウトイベントを削除することができます。しかし、他の方法に対してどれほど効率的かはわかりません。

于 2010-07-27T17:53:11.253 に答える
1

@MvanGeestのソリューションが好きですが、イベントの伝播を理解することでより良い方法があります。要素がクリックされると、含まれている要素が最初にイベントを取得し、ツリーを少しずつ上っていきます。私があなたの要求を理解した場合、あなたは含まれているulがツリーにイベントを送信するのを防ぎたいと思います。ここではビジュアルが最適だと思います。

<ul>
  <li></li>
  <li onclick="ShowChildUL()">
    <ul onclick="function(event) { event.stopPropagation() }">
      <li onclick="DoSomethingFun()"></li>
      <li></li>
      </ul>
  </li>
</ul>

この場合、中央のulをonclickすると、liまでの伝播が停止することがわかります。また、event.stopPropagation（）はクロスブラウザではありません。onclick関数としてこの方法をお勧めします。

function StopPropagation(e) {
  var event = e || window.event;

  [body of event handler function goes here]

  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  } 
}
于 2010-07-27T18:38:07.153 に答える