javascript - 如何在不分配 ID 的情况下测试 HTML 元素的唯一标识？

Question

我已经在 J​​avaScript 中使用以下代码几个月了，它似乎可以正常工作，但我开始怀疑它为什么有效以及它是否是一种安全的方法。

目的只是为了跟踪当前选定的 HTML 元素，如果用户再次单击当前选定的元素，则不执行事件触发的功能代码。

    function elem_mouse_evt( evt )
      {
        if ( evt.currentTarget === elem_mouse_evt.e ) return;
        elem_mouse_evt.e = evt.currentTarget;  
        /* ... */
      }

这对我来说可能是一个相当愚蠢的问题，但为什么这与比较两个对象的等价性不同？ JavaScript 如何进行这种比较，因为每个代表值的集合？

谢谢。

添加 在考虑发布的答案时，我遗漏了一个非常重要的观点，即函数属性 e 具有更大的用途。有一个操作菜单，用户可以选择对当前选择和/或其内容执行的操作。我认为将引用存储在函数属性中比遍历 DOM 以通过其唯一属性之一搜索它会更有效。这是一个合理的方法吗？

Answer 1

The purpose is simply to keep track of the currently selected HTML element and not perform the function code triggered by an event if the user clicks again upon the currently selected element.

我不会按照您的要求进行操作(唯一标识一个元素)，而是以某种方式标记该元素。一种方法是向其 dataset 添加一些内容。我猜你无论如何都会想在某个时候更改这个选定元素的样式，以便用户看到它已经被选中。在这种情况下，我们将添加一个类。

// Add an event listener on the container for these elements.
// It's more efficient to have just one event listener, rather than thousands.
document.querySelector('.parent').addEventListener('click', (e) => {
  // Ensure what's actually clicked meets the filter
  if (!e.currentTarget.matches('.selectable')) {
    return;
  }

  // If it's already selected, don't do anything else!  (You can combine this with above.)
  if (e.currentTarget.matches('.selected')) {
    return;
  }

  e.currentTarget.classlist.add('selected');
  // Perform your other actions here
});