jQuery нажмите на li с вложенным ul - PullRequest
Новая
       15

jQuery нажмите на li с вложенным ul

2 голосов
/ 27 июля 2010

У меня есть список в списках. Когда пользователь нажимает на элемент списка (<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» не должно.

Ответы [ 3 ]

11 голосов
/ 27 июля 2010

Официальный способ есть, но в вашем случае он может быть довольно дорогим: 

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

У потомков li теперь будет обработчик, который останавливает распространение события вверх и запускаетОбработчик li.Пожалуйста, попробуйте и посмотрите, не слишком ли замедлилось приложение.

2 голосов
/ 27 июля 2010

Вы можете контролировать вышеуказанную функцию onmouseover элемент списка и удалить его onmouseout событие элемента.Но я не знаю, насколько эффективно это будет против других способов.

1 голос
/ 27 июля 2010

Мне нравится решение @ MvanGeest, но есть лучший способ понимания распространения событий. При щелчке элемента содержащиеся элементы сначала получают событие и просачиваются вверх по дереву. Если я понимаю ваш запрос, вы бы хотели запретить отправку событий в дереве. Я думаю, что здесь визуальный лучше. 

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

В этом случае вы увидите, что щелчок по ул в середине остановит распространение до 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;
  } 
}
...