Is there a way to stop swipe event propagation from child to parent?

Question

I have slides where users can swipe and navigate between different slides but some slides have carousel or nested slides inside slides.so if I swipe carousel, slides navigation occurs which i need to prevent from happening. So i need to prevent Parent element swipe, if child element is swiped. How to achieve the desired behavior? Thanks

using GSAP Draggable , tried giving stopPropagation inside onPress Event

I am using GSAP Draggable, onPress event I tried doing stopPropagation, still not able to stop child event propagation — sudhakar selva, Jan 20 '20 at 14:07
Is it possible the parent events are not related to the onPress but to another/other event(s)? I would suggest adding some debug code to see what is triggering the parent swipes. — Ashley, Jan 20 '20 at 14:12

score 2 · Answer 1 · answered Jan 20 '20 at 14:47

First, I would recommend a read of stopPropagation vs. stopImmediatePropagation. It appears stopPropagation should work for you if you binded to its child element. See event bubbling.

However, if you binded to the same parent, it's important to note stopImmediatePropagation won't magically skip previous events.

Event handlers are executed in the order in which they have been attached to the element.

In this scenario, I would actually recommend debugging from your browser on the events fired to see what is happening.

Open Dev Tools on Chrome

Click the Sources tab

On right-hand side, scroll down to Event Listener Breakpoints, and expand tree

Click on the events you want to listen for.

Interact with the target element, if they fire you will get a break point in the debugger

Similarly, you can:

In the Elements tab, select your element.

On the right side, there should be a side-tab with Event Listeners.

Expand the tree to see what events are attached to the element.

score 1 · Answer 2 · answered Jan 20 '20 at 14:11

1

One way to solve this issue is to create an intermediary element in between your parent and child, and then on the bubbling phase of a press you could use event.stopProgagation().

That way the child element still registers the press/drag/etc

answered Jan 20 '20 at 14:11

Travis James

1,879
9
22

I will that solution, will let you know soon. Thanks – sudhakar selva Jan 20 '20 at 14:14

Tschallacka · Accepted Answer · 2020-01-20T14:21:30.127

You need to call event.stopImmediatePropagation() to stop immedeatly, even if there are multiple handlers on the same element.

You can also call event.preventDefault() and check up the chain if it has been called by checking if Event.defaultPrevented is true

$('button').on('click',(e) => {
  console.log('Strolling along the beach');
});
/**
 * Halt the train modus, only disadvantage, they only halt the train when it's their turn, so the order of event binding is important.
 */
$('button').on('click',(e) => {
  console.log('EMERGENCY BRAKE');
  e.stopImmediatePropagation();
});

$('button').on('click',(e) => {
  console.log('Watch out for seagulls');
});

/**
 * You want everything to continue as normal, and handle aborts "softly"
 */ 
$('div').on('click',(e) => {
  
  if(!e.isDefaultPrevented()) {
    console.log("in the coconut");
  }
});
$('a').on('click', (e) => {
  console.log('Seagulls, they poke you');
  e.preventDefault();
});

a {
   background: red;
   color: #ddd;
   display: inline-block;
   padding:4px;
   margin: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <button>click me!</button>
  <div>
    <a>
    click me
    </a>
</div>

Thanks.Will debug the same and let you know – sudhakar selva Jan 20 '20 at 14:17 — sudhakar selva, Jan 20 '20 at 14:17

score 1 · Answer 4 · answered Jan 20 '20 at 14:59

1

Issue was with GSAP events bcuz dragStart was called after moving 2pixels but event already propagated to parent by that time so I manually added touchstart event and called stopPropagation on it

answered Jan 20 '20 at 14:59

sudhakar selva

387
4
16

Is there a way to stop swipe event propagation from child to parent?

4 Answers4