javascript - JS onClick preventDefault 用于输入

Question

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

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/

标签： javascripthtmlonclick

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>

---

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

事件当前目标：单击侦听器正在侦听的元素。