Как убедиться, что кликабельные объекты не распространяются на неправильный элемент? - PullRequest
Новая
       7

Как убедиться, что кликабельные объекты не распространяются на неправильный элемент?

0 голосов
/ 14 ноября 2018

Используемые языки: HTML, CSS, JS

Контекст: я относительно новичок в веб-разработке. У меня есть два элемента, перекрывающих друг друга. Один - слайдер, другой - div. Слайдер находится на верхней части div.

Фрагменты кода: 

<div id="myDiv">
  <input id="mySlider" type="range" min=1 max=100 step=1>
</div>

и 

initListeners() {
  document.getElementById("myDiv").addEventListener("click", divFunction);
  document.getElementById("mySlider").addEventListener("input", sliderFunction);
}

Мне нужно сделать так, чтобы при нажатии на ползунок он не нажимал на div. Как бы я поступил так? Я пробовал z-index, но это ничего не меняет.

Заранее спасибо!

Ответы [ 3 ]

0 голосов
/ 14 ноября 2018

Вы также можете проверить target после запуска события щелчка. Я использовал этот подход раньше:

JSFiddle: http://jsfiddle.net/L4ck7ygo/1/

function divFunction(e) {
  if (e.target !== this) {
    return;
  } else {
    console.log('hit');
  }
}

Когда скрипка загружается в первый раз, нажмите ползунок, и вы увидите, что консоль вышла из системы. Чтобы увидеть, как это работает, удалите линию, на которую указывает, и перезапустите скрипку. Теперь, когда вы щелкнете по ползунку, вы не увидите ничего зарегистрированного в консоли, но если вы нажмете на div, а не на ползунке, он войдет в консоль. 

function initListeners() {
  document.getElementById("myDiv").addEventListener("click", divFunction);
  document.getElementById("mySlider").addEventListener("input", sliderFunction);
}

initListeners();

function divFunction(e) {
  console.log('Firing...') // <-- This will log on any click
  if (e.target !== this) {
    return;
  } else {
    console.log('hit'); // <-- This will NOT log except for div click
  }
}

function sliderFunction() {
  console.log('Doing stuffs...');
}
<div id="myDiv">
  <input id="mySlider" type="range" min=1 max=100 step=1>
</div>
0 голосов
/ 21 ноября 2018

ОБНОВЛЕНИЕ: глупость с моей стороны. Я неправильно упорядочил элементы, из-за которых распространение не действовало должным образом.

0 голосов
/ 14 ноября 2018

Как вы уже поняли, события в JavaScript по умолчанию всплывают от дочернего к родительскому. Вы должны предотвратить это на уровне ребенка, также известном как предотвращение распространения.

Используя функцию stopPropagation, вы можете справиться с этим следующим образом: 

function sliderFunction(e) {
     e.stopPropagation();
}

Simple. Это событие больше не достигнет родителя.

EDIT

Хотя остановка распространения является правильным методом, прослушиватели событий также должны совпадать по типу. Следовательно, ползунок и родительский DIV должны иметь click прослушивателей событий (вместо input и click). stopPropagation останавливает распространение события определенного типа. 

function divFunction() {
	console.log('DIV clicked!');
}

function sliderFunction(event) {
  event.stopPropagation();
	console.log('Slider clicked!');
}

function initListeners() { 
	document.getElementById('myDiv').addEventListener('click', divFunction);
  document.getElementById('mySlider').addEventListener('click', sliderFunction); 
} 

initListeners();
/* unnecessary visual aides */

body *:not(label) {
  padding: 2rem;
  outline: 1px solid red;
  position: relative;
}

label {
  display: inline-block;
  position: absolute;
  background: #222;
  color: #fff;
  top: 0; left: 0;
}
<div id="myDiv">
  <label>#myDiv</label>
  <div id="tools">
    <label>#tools</label>
    <input type="range" id="mySlider">
  </div>
</div>
...