Как получить data.key элемента, по которому кликнули, без учета вложенных элементов?

Question

[YakovenkoND]

У меня есть список многоуровневый список.

Список

<li data-key="1"> 1
   <li data-key="2"> 2
      <li data-key="3"> 3
  
      </li>
   </li>
</li>

Вот так олучаю data-key:

JS код для получения data-key

$('li').on('click',function(){
   var data = $(this).data('key');
}
console.log(data);

Что получаю, если я кликаю на элемент 3 вложенности:
Получаю 3 data-key, где тот, что приходит последним, родительский

А мне нужно использовать именно первый data.key, чтобы по его значению открывать модальное окно с этим id. Как получить этот id и игнорировать те, что приходят после?

Вот так использую data.key, если надо.

$('#myModal').find('.modal-body').load('update?id=' + data.key);

Answer 1

[Алексей Уколов]

Нужно просто запретить событию подниматься выше:

$('li').on('click', function(event){
   var data = $(this).data('key');

   event.stopPropagation();
});

Comments

[YakovenkoND]

Это мне помогло, спасибо, что помогли решить проблему.