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”）;