JQuery Селектор неожиданно сработал - PullRequest
Новая
       11

JQuery Селектор неожиданно сработал

2 голосов
/ 30 марта 2020

Я пытался научиться jQuery расширять свои способности, поэтому я попытался эмулировать поведение *. 1015 * UI ".draggable ()". SP inet показывает проблему напрямую, я не понимаю, почему событие .mousedown срабатывает, когда я нажимаю #Box, как я могу заставить его срабатывать только при нажатии #MyBox?

PS Это чисто для понимания 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>

1 Ответ

1 голос
/ 30 марта 2020

Вы не закрыли должным образом ящики 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>, потому что список самозакрывающихся тегов ограничен : 

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

Есть способы предотвратить распространение события на родительские элементы, но в вашем случае вы имеете проблема, представленная выше в вашем HTML коде.

...