Question

I have the following 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>

I need to fire a function if the user clicks on the page, but not if he clicks on the panel.

Is this possible = registering a click on an element excluding some of it’s children? I’m currently trying like this but it doesn’t seem to work:

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

Answer 1

Match the event.target object against a selector.
Use .parentsUntil(<elementTostopAt>, <selector>) to traverse up the tree, to make sure that we did not click on a child of the forbidden element. To include the clicked element, use .andSelf().

The previously described methods return a jQuery collection of elements. Check the size of this property using .length. If the size is non-zero, 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
});