使用 closest() 比较元素与点击事件的距离

Compare distance of element from click event using closest()

我有各种触发相同功能的元素。我需要能够获得两种不同类型的壁橱元素 类。

之前,我只为每个 onClick 事件设置一个函数,尽管我希望它们共享同一个函数,而只是将 current_dragging_element 更改为最接近两种类型 [=19 的元素=] 我在找

current_dragging_element = event.target.closest(".draggable_list");
current_dragging_element = event.target.closest(".draggable_item");
async function onMouseDown(event) {
    
    if (HANDLE THE CHANGE IN VAR?) {
      current_dragging_element = event.target.closest(".draggable_list");
      
    }
    else {
      current_dragging_element = event.target.closest(".draggable_item");
    }
    document.body.classList.add("noselect")
    current_dragging_element.style.transform = "rotate(5deg)";
    current_dragging_element.style.left = event.clientX - 20
    current_dragging_element.style.top = event.clientY - 20
    current_dragging_element.classList.add("drag");
    current_dragging_element.style.position = "fixed";
    current_dragging_element.style.zIndex = 999;

  }

这就是我所拥有的,但是它还不能正常工作。有什么想法吗?

Element.closest() 就像 CSS 选择器,就像 querySelector()。您可以在单个字符串中添加多个 类 并获取其中一个元素的第一次遇到。

请参阅下面的示例。

const entries = document.querySelectorAll('.entry');
entries.forEach(entry => {
  const closest = entry.closest('.draggable_list, .draggable_item');
  console.log(closest);
});
<!-- draggable item is the closest -->
<div class="draggable_list">
  <div class="draggable_item">
    <div class="entry"></div>
  </div>
</div>

<!-- draggable list is the closest -->
<div class="draggable_list">
  <div class="entry"></div>
</div>