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

Question

我有以下HTML（React）设置：

<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中，但我不确定这是否能解决我的问题，或者是否会创建一整套新问题，而且我感觉这不是正确的方式。

- Alex

---

拖动操作肯定会拖动子元素，这很正常。要检查被拖动的子元素，难道不是使用 target 吗？ - user663031

但是如果拖动事件开始于子元素上，我希望取消该事件。 - Alex

通常，取消默认值并防止传播应该就可以解决问题了。 - Christoph

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()。

- Lennholm