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

您需要指定要使用其onclick属性设置点击功能的元素。 目前，您正在将其添加到整个document 。

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

document.querySelector('.label-search')

获取具有class label-search类的div，然后使用.onclick设置其click功能。

请参见下面的工作示例：

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

 <div class="label-search">Label Search</div> 

使用此方法，您可以避免将onclick属性添加到div

Answer 4

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

 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

其他答案使用querySelector和getElementsByClassName 。 如果要考虑performance ，可以执行以下操作：

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

 <div id="elementToBeClicked">Click Me Please!</div> 

Document方法getElementById（）返回一个Element对象，该对象表示其id属性与指定字符串匹配的元素

我建议你使用getElementById因为速度更快，然后使用queryselector （查看此看到的性能差异和测试你自己在这里 ）。

另外，如果您不知道什么是箭头功能() => console.log("I Was Clicked!!!")您可以在此处查看一个不错的解释。

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 class =“ label-search”则用id =“ label-search”代替

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