如何防止拖拽孩子,但允许拖拽父母？

Question

我有一个用户可以拖动的div,在div里面是一个带有一些文本的跨度,我希望允许用户选择(因此他们无法拖动它).如何允许div拖动,而不是跨度？

dragstart事件在div上.

我可能忽略了一些简单的事情.我在div上尝试了draggable = true,在span上尝试了draggable = false.那没用.尝试在dragstart上返回false,这也不起作用.

dragstart(粗略地):

var jTarget = $(e.target);
if ((jTarget.is('div.header') || (jTarget.parents('div.header')) 
       && !jTarget.is('a, input, span'))) 
{
   e.originalEvent.dataTransfer.setData("Text", "test");
}
else
{
   if(e.preventBubble)
      e.preventBubble();
   if(e.stopPropagation)
      e.stopPropagation();
   return false;//???
}

if else部分按照我的预期工作,但我无法阻止拖动并允许选择.

Answer 1

只是发布，以防有​​人搜索类似问题

element.addEventListener('mousedown', function() { this.parentNode.setAttribute("draggable", false); });
element.addEventListener('mouseup', function() { this.parentNode.setAttribute("draggable", true); });

为我工作

Answer 2

您可以在 ondragstart 时将子元素更改为可拖动并防止默认，这将保留子元素上的常规行为，而父元素仍可拖动

function drag(e){ if(e.target.type=="range")e.preventDefault();/*rest of your code*/  }

html：

<input type="range" draggable="true" ondragstart="drag(event)">

Answer 3

如果要真正取消拖动并使父拖动处理程序不引起注意，则需要同时preventDefault和stopPropagation：

<div draggable="true" ondragstart="console.log('dragging')">
    <span>Drag me! :)</span>
    <input draggable="true"
           ondragstart="event.preventDefault();
                        event.stopPropagation();"
           value="Don't drag me :(">
</div>

如果不使用stopPropagation，ondragstart即使将阻止默认行为（event.defaultPrevented == true），仍将调用父对象。如果该处理程序中有无法处理这种情况的代码，则可能会看到细微的错误。

您当然也可以将JavaScript放在里面element.addEventListener('dragstart', ...)。

Answer 4

在跨度上放置一个 mousedown 处理程序并在那里停止事件传播。