могу ли я определить, произошло ли нажатие кнопки с ярлыка

Question

<label for="foo">Click me to trigger the button</label>
<button id="foo">I'm a button</button>

Допустим, у вас есть метка, связанная с кнопкой, как показано выше. Щелчок по этикетке вызывает щелчок по кнопке. Есть ли способ определить из обработчика событий, был ли нажат ярлык?

document.querySelector("#foo").addEventListener("click", function(event) {
  console.log(event.target); //is always button element.
  const labelWasClicked = ???;
  if (labelWasClicked) {
    // do something
  } else {
    // do something else
  }
});

Answer 1

Если вы поместите метку и кнопку в div и активируете событие для этого, целью события будет метка при нажатии метки и кнопка при нажатии кнопки, например:

document.querySelector("#myDiv").addEventListener("click", function(e) {
  e.preventDefault();
  console.log('target:', e.target);
});

<div id="myDiv">
  <label for="foo">Click me to trigger the button</label>
  <button id="foo">I'm a button</button>
</div>

Answer 2

Событие

Click имеет свойство isTrusted, которое получает false, если клик был инициирован скриптом. Я надеялся, что нажатие на метку тоже покажет false ... но оказалось, что это правда. Вы по-прежнему можете эмулировать поведение метки и использовать isTrusted, если это не имеет значения для других частей кода.

document.addEventListener("click", function(e) {
  let label = e.target.closest(".pseudo-label");
  if(!label) return;
  
  if( e.target.closest("#" + label.dataset.for ) ) return;
  
  document.getElementById( label.dataset.for ).click();
});

document.querySelector("#foo").addEventListener("click", function(event) {
  console.log(event.isTrusted);
});

.pseudo-label {
  border: 1px solid red;
  padding: 15px;
  user-select: none;
}

<div class="pseudo-label" data-for="foo">Click me to trigger the button <button id="foo">I'm a button</button> </div>

Но это кажется бесполезным))

Вы можете просто разделить код на два разных слушателя и использовать логическую переменную для определить необходимый щелчок:

let labelClicked = false;

first('label[for="foo"]').addEventListener("click", function() {
  labelClicked = true;
  console.log("label click");
});

first("#foo").addEventListener("click", function(e) {
  console.log("general click"); // You might divide this in two...
  
  if( labelClicked ) return labelClicked = false;  
  console.log("button click");  //...separate function calls.
});

/***/
function first(selector) { return document.querySelector(selector); }

label {
  border: 1px solid red;
  padding: 15px;
  user-select: none;
}

<label for="foo">Click me to trigger the button</label>
<button id="foo">I'm a button</button>

Answer 3

document.querySelector("[for=foo]").addEventListener("click", function(event) {
  console.log(event.target); // Fires only if you click the label
});

document.querySelector("#foo").addEventListener("click", function(event) {
  console.log(event.target); // Fires if you click the label or the button
});

<label for="foo">Click me to trigger the button</label>
<button id="foo">I'm a button</button>

Answer 4

Это потому, что вы нацеливаетесь на элемент DOM с id = "foo".

var labelID;

$('label').click(function() {
       labelID = $(this).attr('for');
       $('#'+labelID).trigger('click');
});

из CSS Уловки