Javascript JQuery选择器意外触发

我一直在尝试学习jQuery以扩展我的能力，因此我尝试模拟jQuery UI“.draggable（）”行为。 spinet直接显示了问题，我不明白为什么当我单击

#Box

时会触发

.mousedown

事件，我如何才能让它仅在单击

#MyBox

时触发

另外，这纯粹是为了理解jQuery，我无意在任何地方使用这段代码

var向下，x，y
$（文档）.ready（函数（）{
$（“#盒子”）.draggable（）
$（“#MyBox”）.mousedown（函数（事件）{
向下=真
var pos=$（this.offset（）；
x=event.pageX-位置左侧；
y=event.pageY-位置顶部；
});
$（文档）.mouseup（函数（事件）{
向下=错误
})
$（文档）.mousemove（函数（事件）{
$（“span”）.text（“X:+event.pageX+”Y:+event.pageY）；
如果（向下）
{
$（“#MyBox”）.offset（{left:event.pageX-x，top:event.pageY-y}）
}
})
});
*{
背景色：白色；
}
#我的盒子{
位置：绝对位置；
背景颜色：蓝色；
宽度：100px；
高度：100px；
}
#盒子{
左：250px；
位置：绝对位置；
背景色：红色；
宽度：100px；
高度：100px；
}

拖动一个盒子
您没有正确关闭盒子和分区。您的浏览器正在为您完成这项工作，并以以下方式解释您的代码：


拖动一个盒子

请注意，
Box
位于
MyBox
内。简单地说，
Box
是
MyBox
的一部分：如果你点击
Box
，你也在点击
MyBox

但是，问题很容易解决：
div
标签应该用
关闭，因为：


拖动一个盒子

有一些方法可以防止事件传播到父元素，但在您的情况下，您的HTML代码中存在上述问题。
如果myBox在上面，并且您希望停止冒泡/传播到下面的框，则在
mousedown
event add
event.stopPropagation（）。谢谢。我想我应该提到我对html也是相当陌生的。