当父元素可拖动时防止子元素被拖动

Question

我有以下 HTML（反应）设置：

<div 
    onDragStart={
    (e) => { this.bound_handleDragStart.call(this, e) }}        
    draggable="true"
>
   <div>Stuff here</div>
   <div><input .../></div>
</div>

此设置使整个外部 div 可拖动。

但是，如果拖动在输入上开始，我希望将其取消。

我尝试过将 onDragStart 添加到输入，将 eventListener 添加到输入并返回 false，禁用手柄拖动开始的传播，以及许多其他操作，但它们都不起作用。

相反，当

event.target

返回外部 div 时，所以我看不到一种方法来确定哪个孩子开始拖动。

我确信这是可以做到的，而且不会太难？

我考虑过将拖动移动到所有内部 div，但我不确定这是否会解决我的问题，或者会产生一系列全新的问题，而且我觉得这不是正确的方法

Answer 1

不管你信不信，但您实际上需要在输入上设置

draggable="true"

，然后在运行

dragstart

的输入上添加

event.preventDefault()

的事件处理程序：

<div 
    onDragStart={
    (e) => { this.bound_handleDragStart.call(this, e) }}        
    draggable="true"
>
   <div>Stuff here</div>
   <div><input draggable="true" onDragStart={
     (e) => e.preventDefault()
   }/></div>
</div>

这将阻止实际的拖动，但父级上的

dragstart

事件仍然会被触发，因为它会冒泡。如果您也想防止这种情况发生，您还需要致电

event.stopPropagation()

。

Answer 2

要停止子组件的传播，请使用 onKeyDown 和 onPointerDown 事件。

    <div 
       onDragStart={
       (e) => { this.bound_handleDragStart.call(this, e) }}        
       draggable="true"
    >
       <div>Stuff here</div>
       <div>
            <input  
               onKeyDown={(e)=>{
                 e.stopPropagation();
               }}
               onPointerDown={(e)=>{
                  e.stopPropagation();
               }}
            />
       </div>
    </div>