Можно ли зарегистрировать щелчок на элементе, исключая вложенные элементы в Jquery?

Question

У меня есть следующий HTML:

 <div data-role="page" id="some">               
    <p>Hello world</p>
    <div data-role="panel" id="panel">
      <p>I'm a panel</p>
    </div>
 </div>

Мне нужно запустить функцию, если пользователь нажимает на страницу, а не если он нажимает на панель.

Возможно ли это = зарегистрировать клик по элементу, исключая некоторых из его дочерних элементов?В настоящее время я пытаюсь так, но это не работает:

 $('div:jqmData(role="page"):not(#panel)').live('click tap', function(event) {
    console.log("registered a click");
    // fire a function
    });

Answer 1

Сопоставьте объект event.target с селектором.
Используйте .parentsUntil(<elementTostopAt>, <selector>), чтобы пройти вверх по дереву, чтобы убедиться, что мы не нажали на потомка запрещенного элемента. Чтобы включить выбранный элемент, используйте .andSelf().

Ранее описанные методы возвращают коллекцию элементов jQuery. Проверьте размер этого свойства, используя .length. Если размер не равен нулю, return.

$('div:jqmData(role="page")').live('click tap', function(event) {
    if ($(event.target).parentsUntil(this, '#panel').andSelf().length) return;
    console.log("registered a click");
    // fire a function
});