Question

我需要在单击元素时向其添加一个类（.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

Answer 1

如果您首先通过单击正文中的任何位置使用mousedown事件从元素中删除现有类'highlight'，就会发生这种情况。

<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');
   }
}

Answer 2

我做这样的事情。

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（＆＃34;普通高亮＆＃34;）。

Answer 3

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

这可以通过几行CSS来完成。在这种情况下的技巧是你必须将tabindex属性添加到每个P，以便它可以获得焦点。

运行下面的代码段，然后点击要尝试的文字。

＆＃13;

p:not(:focus) { background-color: lightgray;}
p:focus { background-color: yellow;}

＆＃13;

<p tabindex=1>This is paragraph 1</p>
<p tabindex=2>This is paragraph 2</p>
<p tabindex=3>This is paragraph 3</p>

＆＃13;

Answer 4

如果你想使用jquery：

$('.normal').click(function(e){
  e.stopPropagation();
  $(this).toggleClass('highlight');
});

$(document).click(function(){
  $('.normal').removeClass('highlight');
});

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

4 个答案: