如何防止在单击 SortableJS 项目的子元素之一时选择该项目？

Question

问题

我正在使用SortableJS构建一个可拖动的树组件。这意味着我的每个sortable-items 都有 atoggle-arrow作为打开和关闭 a 的子元素sub-tree（如果有的话）。

我试图用它来阻止在单击时stopPropagation()选择父项，但它不起作用。sortable-itemtoggle-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元素的处理程序：

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

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

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

我也尝试声明@click.native.stop为事件绑定，但它根本阻止我的toggleTree方法触发。我假设其中某个地方有另一个事件处理程序SortableJS正在干扰绑定@click.native.stop。

问题

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

2. 插件如何处理选择multiDrag？我仔细研究了代码，发现该selectdrop事件是在的事件处理程序中触发的sortable-item，但我对此感到困惑。为什么drop使用事件处理程序来切换 a 的选择sortable-item？

预先感谢您能够对此提供任何帮助。

Answer 1

错误事件

查看SortableJS的源码，似乎你想要停止冒泡的事件不是事件click，而是mouseup事件。

“卡住”拖动项目问题

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

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

可以安全地假设该事件是根据 caniuse.compointerdown进行触发的事件。

解决方案

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

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