javascript - JS onClick 防止输入的默认值

Question

如何防止 <input> 的默认 onClick 行为？

document.getElementById("main").onclick = function() {
  document.getElementById("main").style.backgroundColor = "red";
}

#main {
  background-color: blue;
}

<div id="main">
  If you click here, change background to red.
  <input id="search" type="search" value="If you click here, do nothing.">
</div>

工作示例:https://jsfiddle.net/7bng6zuh/3/

Answer 1

要防止您的 div 在单击输入时更改其背景并仅在直接单击 div 时更改背景，只需将事件目标与事件当前目标进行比较> (您添加点击监听器的元素)并仅当目标与当前目标相同时才更改 div css，如下所示:

const mainDiv = document.getElementById("main");

function checkClick(e) {
	if (e.target === e.currentTarget) { // check if element clicked is the div itself or some other element in the div.
  	mainDiv.style.backgroundColor = "red";
  }
}

mainDiv.addEventListener('click', checkClick);

#main {
  background-color: blue;
}

<div id="main">
  If you click here, change background to red. 
  <input id="search" type="search" value="If you click here, do nothing.">
</div>

<小时/>

事件目标:您单击的元素。

事件当前目标:点击监听器正在监听的元素。