有没有办法阻止滑动事件从 child 传播到 parent？

Question

我有幻灯片，用户可以在不同幻灯片之间滑动和导航，但有些幻灯片内部有旋转木马或嵌套幻灯片 slides.so 如果我滑动旋转木马，就会发生幻灯片导航，我需要防止这种情况发生。所以我需要防止 Parent 元素滑动，如果 child 元素被滑动。如何实现期望的行为？谢谢

使用 GSAP Draggable ，尝试在 onPress 事件中提供 stopPropagation

Answer 1

解决此问题的一种方法是在 parent 和 child 之间创建一个中介 element，然后在压力机的冒泡阶段，您可以使用 event.stopProgagation().

这样 child element 仍然会注册 press/drag/etc

Answer 2

您需要调用 event.stopImmediatePropagation() 立即停止，即使同一元素上有多个处理程序也是如此。

也可以叫event.preventDefault() and check up the chain if it has been called by checking if Event.defaultPrevented是真的

$('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>

Answer 3

首先，我推荐阅读 stopPropagation vs. stopImmediatePropagation. It appears stopPropagation should work for you if you binded to its child element. See event bubbling。

但是，如果您绑定到同一个父项，请务必注意 stopImmediatePropagation 不会神奇地跳过以前的事件。

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

在这种情况下，我实际上建议从您的浏览器调试触发的事件以查看发生了什么。

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

同样，您可以：

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.

Answer 4

问题出在 GSAP 事件上，因为在移动 2 像素后调用了 dragStart，但到那时事件已经传播到父级，所以我手动添加了 touchstart 事件并在其上调用了 stopPropagation

有没有办法阻止滑动事件从 child 传播到 parent？

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

html

javascript

reactjs

vue.js

gsap