时间戳

首页 > 解决方案 > 使用最接近（）比较元素与点击事件的距离

javascript - 使用最接近（）比较元素与点击事件的距离

问题描述

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

在我只为每个 onClick 事件提供一个函数之前，尽管我希望它们共享同一个函数，而只是将 current_dragging_element 更改为最接近我正在寻找的两种类型的类的元素。

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;

  }

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

标签： javascripteventsonclickelementclosest

解决方案

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>

推荐阅读