按钮的奇怪行为：调用“onclick”父元素而不是自身（HTML按钮）

Question

我有以下Web应用程序结构，我正在自动化测试：

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

两个对象都有事件监听器，在一些链接的js文件中添加了viw JavaScript（我不知道究竟是什么文件）。

用鼠标点击“添加”按钮后，调用AJAX函数调用并将行添加到某个表中，点击em元素后，打开应用程序菜单。

我尝试通过VBScript重现点击按钮ADD（正如我所说，我正在自动测试此应用程序），而不是在表格中添加行，应用程序菜单打开。但我确切地知道，我点击按钮添加，但不是em-element。 PseudoCode，这样做：

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

请让我知道如果你知道这种行为的原因，因为我真的不知道该怎么想。 （我尝试了很多不同的方法来解决这个问题，但没有任何帮助）

谢谢！

Answer 1

像大多数事件一样，

click通过所有祖先元素“起泡”。当您点击<button>时，是的，您也点击了包含它的<em>。

如果<em>的事件处理程序需要知道点击直接位于<em>的内容区域，而不是其任何子项，则应该查看event.target （IE＆lt; 9）属性中的srcElement，用于在打开菜单之前检查点击是否在按钮上，或者不在按钮上。或者，如果按钮的点击处理程序调用{​​{1}}（IE中的event.stopPropagation()＆lt; 9），则该事件将停止并且不再进一步传递。