jQuery Forum

Hi all.

I'm looking for a solution on a tap / tap-toggle conflict. I have a simple test page containing a header and an html element. Something like this :

1. <div data-role="page" data-fullscreen="true" >
2.         <div data-role="header" data-position="fixed">
3.             <h1>My extraordinary page</h1>
4.         </div>
5.         <div data-role="content">
6.             <div id="myElement">My element</div>
7.         </div>
8.     </div>
9. </div>

As per the documentation, when I tap the screen, the header toggles between visible and hidden.
On my element, I bind a tap event. Something like this :

1. $('#myElement').bind('tap', function(e) {
2.       // Do something
3. });

Both events work as expected, but too perfectly for me :D
In fact I'm looking for a solution to prevent the toggle event to be fired when I tap the #myElement element. The expected behavior is :
- If I tap #myElement, only the bound event is fired. The header toolbar is NOT toggled and keeps its current position.
 - If I tap anywhere else, the header toolbar is toggled (default behavior)
I tried to add preventive actions to the bound tapped event, such as preventDefault or stopPropagation, but these actions do not have any effect on the toolbar :

1. $('#myElement').bind('tap', function(e) {
2.       // Do something
3.       e.stopPropagation(); // Has no effect on the toolbar
   
4. });

Does anyone think of a possible solution ?
Thanks in advance !