Неожиданное распространение события клика на одноуровневый элемент, когда родительский элемент "label" содержит дочерние ⇐ Javascript

[Гость]

Когда элемент label содержит дочерние элементы button и span (все одноуровневые элементы), неожиданное нажатие на диапазон также приводит к нажатии первой кнопки.
р>
Например, вот метка, которая имеет 2 кнопки и 2 диапазона в качестве прямых дочерних элементов, каждая из которых имеет одно событие щелчка, отображающее предупреждение:

btn1.addEventListener('click', function() { alert('btn1')}) span1.addEventListener('click', function() { alert('span1')}) btn2.addEventListener('click', function() { alert('btn2')}) span2.addEventListener('click', function() { alert('span2')}) Кнопка1 Span1 Кнопка2 Span2

https://jsfiddle.net/uwp8b1o2/

Нажатие на любую кнопку вызывает событие нажатия только этой кнопки (как и ожидалось). Однако:
[*]Нажатие на первый диапазон также запускает событие нажатия первой кнопки. [*]Нажатие на второй диапазон также запускает событие нажатия первой кнопки (но не второй кнопки или другого диапазона) [*]Изменение родительского элемента на «span» или «div» позволяет избавиться от неожиданного поведения — кажется, что это происходит только тогда, когда родительским элементом является метка.
Проверено:
[*]Chrome 116.0.5845.140 [*]Сафари 15.6.1
В онлайн-документации элемента label ничего не говорится о том, что распространение его дочерних событий отличается от распространения других элементов https://www.w3schools.com/jsref/dom_obj_label.asp

Что, черт возьми, происходит?