HTML 在子元素中禁用“可拖动”

如何解决HTML 在子元素中禁用“可拖动”

因此，在 HTML 中，我可以通过将“draggable”属性设置为 true 来使元素可拖动：

<div class="my-draggable-element" draggable="true"></div>

这使得元素及其整个子树可拖动。即在元素上点击并拖动，视觉上拖动元素，显示部分透明，固定在光标下，拖动也开始触发JS中的拖动事件。

假设我有一个子元素，它不应该是可拖动的，而是在元素内部：

<div class="my-draggable-element" draggable="true">
    <div class="not-draggable"></div>
</div>

如何防止在此子元素上单击和拖动来拖动父元素？最终，它应该防止元素在视觉上拖动，并避免触发任何 JS 事件。

由于这是 JS 驱动的，因此在任何 JS 事件上使用 preventDefault 或 stopPropagation 都可以。

TIA！