Javascript 无法单击子元素，因为父元素始终处于焦点

我有一个按钮列表，悬停时，按钮右上角会出现一个小（x）。我试图在（x）上附加一个单击处理程序，但是，每当我单击它时，实际上是单击按钮，而不是（x）

代码：

即使我将鼠标放在（x）上，父按钮仍然显示在焦点上

---

更新

我可以通过增加（x）图标的z索引来单击该图标

但是，单击时，会调用（x）onclick以及主btn.onclick调用

---

更新

标记：

<button type="button" value="Checkout" class="btn btn-primary">
    Check out

    <div class="btn-close">
        <div class="btn-x-icon">x</div>
    </div>

</button>

退房
x

您应该在单击时停止传播事件。事件一旦产生，就会传播到所有固有元素。您应该停止该传播，以避免为该事件执行更多处理程序

更多关于事件冒泡（以另一种方式）和传播的信息

使用可以确保只响应所单击的正确元素

在下面的示例中，我只添加了标识符，以便可以附加 单击“事件”更易于演示，但事件中的代码 处理程序适用于您的代码

另外，请注意，我没有在处理程序中指定

事件

参数 因为在指定参数时，

事件

是自动分配的 对于事件，如

“单击”，函数（evt）

，您现在使用 d3指定的事件对象，可能是也可能不是同一事件 反对

var-button=document.getElementById（“按钮”）；
addEventListener（'click'，function（）{
如果（event.target==此）{
console.log（'单击按钮'）
}
})
var按钮=document.getElementById（“关闭”）；
addEventListener（'click'，function（）{
console.log（'close clicked'）
})

#关闭{
背景色：红色；
}

退房
x

谢谢您提供的信息。我们已经做了一些更改，但似乎没有改进。那么我只能建议在onmouseover方法之外创建“x”div，并在单击时使用绑定函数，然后在mousehover上显示和隐藏它（css伪类：hover应该足够了）。现在您的z索引已经修复，您需要检查

事件.target

，以确保仅在

X

是目标时执行代码。你可以停止传播，但这是一把双刃剑，因为当你需要传播时，你现在不能再这样做了。因此，我建议您检查instead@Fran-添加了标记

<button type="button" value="Checkout" class="btn btn-primary">
    Check out

    <div class="btn-close">
        <div class="btn-x-icon">x</div>
    </div>

</button>

btnArray.forEach(function (button) {

    const btn = document.createElement('div');
    btn.type = 'button';
    btn.value = button.name;
    btn.onClick = evt => {
        // do soemthing on click
    }

    btn.onmouseover = function(e) {
        var me = d3.select(btn);
        me.append('div')
            .classed({'btn-close': true})
            .text('x')
            .on('click', function(evt) {
                evt.stopPropagation();
                alert('you clicked on the x!');
            });
    }

    btn.onmouseout = function(e) {
        var me = d3.select(btn);
        me.selectAll('.btn-close')
            .remove();
    }

    btn.appendChild(document.createTextNode(button.name))

});