时间戳

首页 > 解决方案 > 如何在不分配 ID 的情况下测试 HTML 元素的唯一标识？

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

问题描述

我已经在 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 以通过其唯一属性之一搜索它会更有效。这是一个合理的方法吗？

标签： javascript

解决方案

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

我不会按照您的要求（唯一标识一个元素），而是以某种方式标记该元素。一种方法是在它的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
});

推荐阅读