Событие Click для элемента, вложенного в кнопку

Вот простой пример проблемы:

<body>
  <button id="parent"  onclick="alert('parent')">
      <span id="child" onclick="alert('child')">Authenticate</span>
  </button>
</body>

В Chrome это предупреждает "child", затем "parent", но в IE/FF мы получаем только "Parent".

Ясно, что это можно устранить несколькими способами (сменить кнопку на div, удалить диапазон и т.д.), но я хотел узнать, был ли способ сделать эту работу (т.е. предупредить "ребенок" ) без изменения HTML.

Спасибо!

PS: Пробовал JQuery и имеет такое же поведение.

Ответ 1

Как сказал @muistooshort, обработка событий кликов внутри других событий кликов кажется неестественной. Я также думаю, что вам нужно переосмыслить свой дизайн.

При этом вы можете обработать событие с одним кликом в своем основном контейнере, а затем проверить, какой элемент был источником щелчка

Это был бы путь, учитывая ваш прецедент, imo:

$('your-button-container').click(function(event){
    console.log(event.originalEvent.srcElement);
});

Сделайте необходимые проверки на event.originalEvent.srcElement и действуйте соответственно.

Edit: Не используя JQuery, он будет выглядеть следующим образом:

yourButtonContainer.addEventListener(function(event){
    console.log(event.srcElement);
});

Ответ 2

Как уже упоминалось несколькими пользователями, это нехорошая практика встраивать такие кнопки, но для образовательных целей я бы сделал это следующим образом:

HTML:

<body>
  <button id="parent" onclick="callFn(event, 'parent')">
    <span id="child" onclick="callFn(event, 'child')">Authenticate</span>
  </button>
</body>

JS:

window.callFn = function(evt, type) {
  if (type === 'child') {
    alert(type);
  }
}

JS Fiddle: https://jsfiddle.net/4vo3arpf/4/