Странное поведение кнопки: вызов элемента родительского элемента «onclick» вместо самого себя (кнопка HTML)

Question

У меня есть следующая структура веб-приложения, для которого я автоматизирую тестирование:

<em unselectable="on" class="x-btn-split">
        <button type="button" class="x-btn-text " id="ext-gen523" title="Add Options">Add</button>
</em>

У обоих объектов есть слушатели событий, добавлен viw JavaScript в некоторый связанный js-файл (я не знаю, какой именно файл).

После нажатия на кнопку «Добавить» с помощью мыши вызывает вызов функции AJAX и добавляет строку в какую-то таблицу, после нажатия на элемент em, открывается меню приложения.

Я пытаюсь воспроизвести нажатие на кнопку ADD через VBScript (как я уже говорил, я автоматизирую тестирование этого приложения), вместо добавления строки в таблицу, открытия меню приложения. Но я точно знаю, что нажимаю кнопку Добавить, а не em-элемент. Псевдокод, который делает это:

set obj = domHelper.GetElementByClassName(container,"x-btn-text","button")
obj.click

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

Спасибо!

Answer 1

click, как и большинство событий, «пузырится» через все элементы предка. Когда вы нажимаете <button>, да, вы также нажимаете <em>, который содержит его.

Если обработчик события для <em> должен знать, что щелчок был непосредственно в области содержимого <em>, но не его дочерних элементов, он должен посмотреть на event.target (srcElement в IE <9) свойство, чтобы проверить, что нажатие на себя, или не на кнопку, перед открытием меню. В качестве альтернативы, если обработчик нажатия кнопки вызывает <code>event.stopPropagation() (cancelBubble= true в IE <9), то событие остановится и больше не будет проходить. </p>