javascript - JQuery 选择器意外触发

Question

我一直在尝试学习 jQuery 来扩展我的能力，所以我尝试模拟 jQuery UI“.draggable()”行为。Spinet直接显示问题，我不明白为什么点击#Box时会触发.mousedown事件，如何让它只在点击时触发在#MyBox 上？

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

var down, x, y

$(document).ready(function(){
  $("#Box").draggable()
  $("#MyBox").mousedown(function(event){
    down = true
    var pos = $(this).offset();
    x = event.pageX - pos.left;
    y = event.pageY - pos.top;
  });
  $(document).mouseup(function(event){
    down = false
  })
  $(document).mousemove(function(event){
    $("span").text("X: " + event.pageX + " Y: " + event.pageY);
    if(down) 
    {
      $("#MyBox").offset({left:event.pageX-x, top:event.pageY-y})
    }
  })
});

* {
  background-color: white;
}

#MyBox {
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
}

#Box {
  left: 250px;
  position: absolute;
  background-color: red;
  width: 100px;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="
  crossorigin="anonymous"></script>
  
  
<div class='test'>
  <span>Drag a box</span>
  <div id='MyBox'/>
  <div id='Box'/>
</div>

Answer 1

您没有正确关闭盒子 div。您的浏览器正在为您完成这项工作并按以下方式解释您的代码:

<div class='test'>
  <span>Drag a box</span>
  <div id='MyBox'>
    <div id='Box'></div>
  </div>
</div>

请注意Box在里面MyBox 。简单来说，Box是 MyBox 的一部分:如果您点击Box您还点击 MyBox .

但是这个问题很容易解决:div标签应以 </div> 结束因为the list of self closing tags is limited :

<div class='test'>
  <span>Drag a box</span>
  <div id='MyBox'></div>
  <div id='Box'></div>
</div>

有多种方法可以防止事件传播到父元素，但在您的情况下，您的 HTML 代码中出现了上述问题。