使用最近的比较元素与点击事件的距离

问题描述

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

在我只为每个 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;

  }

这就是我所拥有的,但它尚未正常运行。有什么想法吗?

解决方法

0 就像一个 CSS 选择器,就像 with recursive n as ( select 1 as n union all select n + 1 from n where n < 1000 ) select n from n; 一样。您可以在单个字符串中添加多个类,然后第一次遇到这些元素。

见下面的例子。

Element.closest()
querySelector()