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

Question

问题

我正在使用 SortableJS构建一个可拖动的树组件。这意味着我的每个 sortable-item s 有一个 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 的处理程序绑定(bind)到我的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作为事件绑定(bind)，应该停止 click来自 toggle-arrow 的事件子元素，但它不起作用。

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

我也尝试过声明 @click.native.stop作为事件绑定(bind)，但它只是阻止我的toggleTree从根本上射击的方法。我假设在 SortableJS 中的某处还有另一个事件处理程序这会干扰 @click.native.stop捆绑。

问题

当我的 sortable-item 的子元素时，如何停止传播事件？被点击？

multiDrag 如何处理选择插入？我挖掘了代码，发现 the select event is fired within the handler of the drop event的sortable-item ，但我对此感到困惑。为什么是drop用于切换 sortable-item 选择的事件处理程序?

在此先感谢您提供的任何信息。

Answer 1

错误事件

查看 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