vue.js - 单击其子元素之一时，如何防止选择 SortableJS 项目？

问题

我正在使用 SortableJS 来构建一个可拖动的树组件。这意味着我的每个 sortable-item 都有一个 toggle-arrow 作为打开和关闭 sub-tree (如果有)的子元素。

如果单击 stopPropagation()，我试图使用 sortable-item 来阻止选择父 toggle-arrow，但它不起作用。

关闭时是这样的:


打开时看起来像这样:


您在打开状态(第二张图片)中看到的蓝色突出显示是我在使用 selectedClass 插件时为 multiDrag 选项选择的样式。

这说明当我单击 toggle-arrow 时，它​​会导致选择父 sortable-item。

我不希望这种情况发生。

代码

我的 SortableJS 树组件中项目的代码如下所示(使用 Vue.js 和 Pug 语法):

div.sortable-item
    div.content
        div.toggle-arrow(@click.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree

然后我在我的 @click 元素上有一个用于 toggle-arrow 绑定(bind)的处理程序:

toggleTree = function($event) {
    $event.stopPropagation()
    /// Code for handling the sub-tree toggling goes here.
    /// The sub-tree toggling itself works just fine.
}

您可以看到我将 @click.stop 声明为事件绑定(bind)，这应该会阻止 click 事件从 toggle-arrow 子元素冒泡，但它不起作用。

我什至试图在处理程序中使用 $event.stopPropagation 。但是，事件似乎继续冒泡，因此父 sortable-item 元素最终处于选中状态。

我还尝试将 @click.native.stop 声明为事件绑定(bind)，但它只是阻止了我的 toggleTree 方法根本无法触发。我假设在 SortableJS 中某处有另一个事件处理程序会干扰 @click.native.stop 绑定(bind)。

问题

单击 sortable-item 的子元素时，如何停止事件传播？

multiDrag 插件如何处理选择？我仔细阅读了代码并看到了 select 的 the drop event is fired within the handler of the sortable-item event ，但我对此感到困惑。为什么 drop 事件处理程序用于切换 sortable-item 的选择？

预先感谢您对此的任何了解。

最佳答案

错误事件

查看 SortableJS 的源代码，似乎您要阻止冒泡的事件不是 click 事件，而是 mouseup 事件。



“卡住”拖动项目问题

如本答案的评论中所示，停止对 mouseup 事件的传播会导致无意中开始拖动的问题，并且 sortable-item 变得“卡住”到指针上。

似乎“拖动启动”是由 pointerdown 、 mousedown 或 touchstart 事件触发的，具体取决于设备。

可以安全地假设 pointerdown 事件是触发 according to caniuse.com 的事件。



解决方案

因此，解决此问题的实际方法是使用 @pointerdown.stop 事件绑定(bind)来触发您的 toggleTree 方法，而不会触发 sortable-item 的选择或无意的拖动启动。

div.sortable-item
    div.content
        div.toggle-arrow(@pointerdown.stop="toggleTree($event)")
        div.icon
        div.title
    div.sub-tree

关于vue.js - 单击其子元素之一时，如何防止选择 SortableJS 项目？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/62099199/