document.onclick仅对特​​定的div执行

Question

我在下面输入以下代码：

document.onclick = function () {
    console.log("Hello"); 
}

<div class="label-search">Click me</div>
    

仅当我单击此div class="label-search"而不在div中添加onclick时，我才想执行 console.log 。

谢谢。

Answer 1

选择div以将onclick应用于该div 使用

document.getElementsByClassName

document.getElementsByClassName('label-search')[0].onclick = function () {
    console.log("Hello"); 
}

<div class="label-search">aa</div>

使用querySelector

document.querySelector('.label-search').onclick = function () {
    console.log("Hello"); 
}

<div class='label-search'>aa</div>

Answer 2

您必须将div元素作为目标，以在单击它时执行该功能。您可以使用Document.querySelector()

  

Document方法querySelector()返回文档中与指定选择器或选择器组匹配的第一个Element。如果未找到匹配项，则返回null。

document.querySelector('.label-search').onclick = function () {
    console.log("Hello"); 
}

<div class="label-search">Click</div>

    

Answer 3

您需要指定要设置使用其library(tidyverse) df1 %>% mutate(Variables = pmap(., ~ c(...) %>% na.omit %>% names %>% toString)) 属性的点击功能的元素。目前，您正在将其添加到整个onclick中。

在这种情况下，您可以使用：

document

获取具有类document.querySelector('.label-search')的div，然后使用label-search设置其点击功能。

请参见下面的工作示例：

.onclick

document.querySelector('.label-search').onclick = function() {
  console.log("Hello");
}

使用此方法，您可以避免将<div class="label-search">Label Search</div>属性添加到onclick

Answer 4

您需要为元素<div class="label-search" id="searchdiv"></div>分配唯一属性（id），并将事件侦听器附加到您的特定元素：

document.querySelector('#clickmediv').addEventListener('click',function(){console.log("Hello!");});

.label-search {
  width: 100px;
  height: 100px;
  background-color: blue;
}

<div class="label-search" id="clickmediv">Click me</div>

Answer 5

其他答案使用了ServiceHost host = new ServiceHost(typeof(GradingService)); host.Open(); 和querySelector。如果您要考虑getElementsByClassName，可以执行以下操作：

performance

let element = document.getElementById("elementToBeClicked");
element.onclick = () => console.log("I was clicked !!!!");

  

The Document method getElementById() returns an Element object representing the element whose id property matches the specified string

我建议您使用<div id="elementToBeClicked">Click Me Please!</div>，因为比使用getElementById更快（请检查this来查看性能差异并测试您自己的here）。

此外，如果您不知道什么是箭头功能queryselector，则可以签入here一个很好的解释。

Answer 6

您可以通过以下3种方法执行此操作：

1. 用户querySelector：

   document.querySelector（'。label-search'）。onclick = function（）{     console.log（“ Hello”）; }

2. GetElementByClassName

   document.getElementsByClassName（'label-search'）[0] .onclick = function（）{     console.log（“ Hello”）; }

3. 如果可以用id替换类 class =“ label-search”替换为id =“ label-search”

   let element = document.getElementById（“ label-search”）; element.onclick =（）=> console.log（“ Hello”）;