JS onClick предотвращать дефолт для ввода - PullRequest
Новая
       6

JS onClick предотвращать дефолт для ввода

0 голосов
/ 09 января 2020

Как я могу предотвратить поведение 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/

Ответы [ 2 ]

1 голос
/ 09 января 2020

Чтобы ваш div не мог изменить свой фон при нажатии на вход, и изменять его только при прямом нажатии div, просто сравните событие target с событием current target ( элемент, к которому вы добавили прослушиватель щелчков), и изменяйте 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>

Цель события: Элемент, на который вы нажали.

Цель события, текущая : Элемент, который прослушивает прослушиватель кликов.

0 голосов
/ 09 января 2020

Проверьте цель: 

document.getElementById("main").addEventListener("click",function(e) {
  if (e.target.id && e.target.id  === "main") { // or e.target === e.currentTarget
    this.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>
...