Question

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

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

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

这对我来说可能是一个非常愚蠢的问题，但是为什么这与比较两个对象的等效性不同呢？由于每个JavaScript表示值的集合，因此JavaScript如何进行比较？

谢谢。

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

Answer 1

目的仅仅是跟踪当前选择的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
});

如何在不分配ID的情况下测试HTML元素的唯一身份？

1 个答案: