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

Question

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

之前，我只为每个 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;

  }

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

Answer 1

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>

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

Compare distance of element from click event using closest()

javascript

events

onclick

element

closest