Strange behavior of button: calling "onclick" parent's element instead of itself (HTML Button)

Question

Hi all!

I have following structure of web application, for which I'm automating testing:

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

Both objects has event listeners,added viw JavaScript in some linked js-file (I don't know what file exactly).

After clicking on button "Add" with mouse, calls AJAX function calls and row adding to some table, after clicking on em element, opens application menu.

I try to reproduce clicking on button ADD via VBScript (as I say, I'm automating testing of this application),instead of adding row into table, application menu opening. But I know exactly, that I'm clicking button Add, but not em-element. PseudoCode, that do so:

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

Please, let me know If you know reasons for this behavior, because I'm really don't know what to think. (I've tried many different approaches to fix this, but nothing helped)

Thank you!

Answer 1

click, like most events, ‘bubbles’ up through all ancestor elements. When you click the <button>, yes, you're also clicking the <em> that contains it.

If the event handler for the <em> needs to know that the click was directly in the content area of the <em> but not any of its children, it should look at the event.target (srcElement in IE<9) property to check that the click is on itself, or not on the button, before opening a menu. Alternatively, if the button's click handler calls event.stopPropagation() (cancelBubble= true in IE<9), then the event will stop and not pass up any further.