单击元素时添加一个类，在其他地方单击时将其删除

Add a class when clicked on element, remove it when clicked elsewhere

本文关键字：单击 方单击 删除 其他 添加 元素 一个      更新时间：2023-09-26

我需要在单击元素时向元素添加一个类（ .highlight），并且在单击元素或文档中其他任何地方时应将其删除。

我已经设法在使用 classList.toggle() 方法单击元素时添加和删除类，但不知道如何在文档中单击时删除类。

这是我的HTML，CSS和JS。

<p class="normal" onclick="detectClick(this)">This is paragraph 1</p>
<p class="normal" onclick="detectClick(this)">This is paragraph 2</p>
<p class="normal" onclick="detectClick(this)">This is paragraph 3</p>
.highlight {
    background-color: yellow;
}
function detectClick(element) {
    element.classList.toggle("highlight");
}

在这里，您可以看到代码的实际操作，http://codepen.io/vbcda/pen/GodZmr

如果您首先通过单击正文中的任意位置来使用 mousedown 事件从元素中删除退出类"突出显示"，则可能会发生这种情况。

<body onmousedown="outerClick(this)"> // Add this in your html file
function detectClick(element) {
    element.classList.toggle("highlight");
}
function outerClick(el){
  var elements = document.querySelectorAll(".highlight");
  for (var i = 0; i < elements.length; i++) {
      elements[i].classList.remove('highlight');
   }
}

我会做这样的事情。

function detectClick(element) {
  var elements = document.getElementsByClassName("normal");
  Array.from(elements).forEach(function(element) {
    element.setAttribute("class", "normal");
  });
  element.setAttribute("class", "normal highlight");
}

您也可以明确并使用document.getElementsByClassName（"正常突出显示"）。

一个简单的轻量级解决方案

这可以通过几行CSS来完成。在这种情况下，诀窍是您必须将 tabindex 属性添加到每个 P，以便它可以接收焦点。

运行下面的代码段，然后单击文本进行尝试。

p:not(:focus) { background-color: lightgray;}
p:focus { background-color: yellow;}
<p tabindex=1>This is paragraph 1</p>
<p tabindex=2>This is paragraph 2</p>
<p tabindex=3>This is paragraph 3</p>

如果你想使用jquery：

$('.normal').click(function(e){
  e.stopPropagation();
  $(this).toggleClass('highlight');
});
$(document).click(function(){
  $('.normal').removeClass('highlight');
});
相关文章：