Javascript 父div妨碍其子div的聚焦

我正在尝试制作一个简单的插件，使div可以拖动。当然，一个div可以包含一个内容（通常是一个表单），它应该被拖动

这是一个原型：

问题是，这个div中的texbox从未获得焦点，因此我无法键入：

<div id="draggable-element">Drag me!
<form>
    <input type="text" style="width:50px;"/>
    <button>ok</button><br><br>
    <input type="checkbox">check it</input>
 </form>
</div>

拖我！
好的


检查一下

如您所见，表单上的其他元素不会发生这种情况。复选框和按钮可以正常使用

---

此外，我只希望灰色区域是可拖动的，而不是内部元素。在本例中，您可以将鼠标光标完全放在文本框内，并开始拖动整个父div。

在

onmousedown

处理程序中，以

返回false结束。这可以防止单击输入时发生单击事件，因此它永远不会获得焦点。我想你要找的是：

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function (e) {
    if (e.id == 'draggable-element') {
        // memorize the offset to keep is constant during drag!
        x_offset = e.clientX - x_elem;
        y_offset = e.clientY - y_elem;    
        _drag_init(this);
        return false;
    }
};

draggable元素上的onmousedown处理程序返回false，通过停止事件传播，允许它将使输入焦点可调，并且拖动仍然有效。（至少在铬上）

paradoxix的回答是正确的，即
mousedown
事件上的
return false
阻止了所有其他事件的传播

在任何监听
mousedown
事件的元素上，您都不会遇到任何问题，因为该事件首先发生在它们身上，然后才发生在长方体本身上。但是输入侦听
焦点
事件，由于框事件中的
返回false
，因此该事件从未发生

解决方案是防止
onmousedown
从子元素冒泡到框中，如下所示：

var nodes = document.getElementById('draggable-element').childNodes;
for(var i=0; i<nodes.length; i++) {
    nodes[i].onmousedown = function(e) {
        e.stopPropagation();
    }
}

var nodes=document.getElementById（'draggable-element'）.childNodes；
对于（var i=0；iYou不需要结束标记进行输入。输入效果很好，但现在有一种奇怪的二次效果。当我拖动元素时，部分屏幕会改变颜色。scrrenshot：这种情况更容易发生，因为你拖动元素的速度更快。有什么办法可以消除这种情况吗？返回false；in \u move\u elem似乎有帮助，因为它可以防止e selecting.Copy-paste Error的默认事件操作，抱歉。您可以使用StopRopAgation（）防止事件冒泡，但最终复制了错误的代码。已更新。此外，当前选定的答案不会阻止您问题的最终要求，因此不完整。它确实回答了您的初始问题，但如果这足够，请更新您的问题以防止混淆。
var nodes = document.getElementById('draggable-element').childNodes;
for(var i=0; i<nodes.length; i++) {
    nodes[i].onmousedown = function(e) {
        e.stopPropagation();
    }
}