1

I'm building a page where I want to utilize taphold to launch a contextMenu. However, when an element is inside a parent the taphold propagates to this parent. I want to prevent this.

so when a user holds the child, ONLY the child taphold function should launch, and when the user holds the parent ONLY the parent should launch.

I tried el.stopPropagation() and el.stopImmediatePropagation(), but both didn't stop the taphold from propagating to the parent.

This fiddle will show the problem. Holding the green child also triggers the taphold of the red parent

The fiddle shows two divs:

<div class='parent'>
   <div class='child'></div>
</div>

and uses this code:

$('.parent').on('taphold', function( el ){
   alert( 'parent' );
});

$('.child').on('taphold', function( el ){
   alert( 'child' );
});

if you tap and hold the green div the red will also trigger, which is not what I want.

patrick
  • 11,519
  • 8
  • 71
  • 80

1 Answers1

1

Well, taphold is not so easy as other events, because to recognize it, there is the need to start a timer which should check the elapsed time from the initial screen pressure (JQM is using its own vmousedown event). So, after the tapholdThreshold has been elapsed - usually 750 ms - the framework can raise the taphold event.

I believe to get the perfect solution You may need to patch JQM, otherwise here is a quick workaround:

$('.parent').on('taphold', function( e ) {
    if(e.target == e.currentTarget) {
        // do the action
    }
});

The taphold will be raised anyway, but You can trap the origin and skip the execution of Your code.

deblocker
  • 7,629
  • 2
  • 24
  • 59
  • 1
    This looked very promising and worked like a charm emulating a mobile device on Google Chrome for instance, but when I try this on an actual mobile device the default 'right click' (where you can open in new tab, read later, etc) pops up in Chrome. Is there a way to disable that default browser contextMenu? – patrick Oct 08 '18 at 19:14
  • 1
    Mobile device OS-Versions hell... As for the right-click You can use `oncontextmenu="return false;"`- but for the default device `taphold`I believe You may try this: [touch-callout equivalent](https://stackoverflow.com/a/15013156/4845566) . Let me know... – deblocker Oct 09 '18 at 07:34