Question

所以我的代码中有一个简单的下拉列表，我附加了一个点击处理器，就像这样（代码在技术上是打字稿）

this.highElement.click(() => {
    console.log(event);
});

当我单击选择框和单击其中一个选项（这里是一个Js小提琴，演示我的意思https://jsfiddle.net/Kolichikov/zmdL6q2d/）时，会触发此事件。我理想的情况是，当我点击选择框本身时，事件才会触发，而不是生成的项目列表。

我尝试为选项this.highElement.on("click", "option", () => { console.log("option!"); });设置委派事件，但这不起作用。

我注意到MouseEvent属性不同（点击项目时没有填充鼠标坐标），但这似乎是一个可能会改变的浏览器实现（可能？）。

有没有办法正确区分这两个事件？

Answer 1

我会给你2个选项，你选择最适合自己的选项：

首先，您可以区分这两个事件：

$("#selectItem").click(function(event){
    if (event.target.id == 'selectItem') 
        console.log(event)
});

当从单击选择和选择选项返回时，事件具有不同的目标。

但我认为如果您使用了更改事件

会更清楚

$("#selectItem").change(function(event){
     console.log(event)
});

仅在您选择项目时才会触发。根据您的需要，这可能会更好。

修改

Checkingwhat @libzz说，我注意到上面回答的第一部分是错误的。我没有编辑它，因为OP接受了答案，我正在改变导致他做出决定的代码。

但正如@libzz所说，被解雇的事件总是具有相同的身份。

我现在还注意到，点击事件仅在单击选项时触发，而不是在单击选择框时触发。这使onclick与onchange事件保持一致。在这种情况下，他们基本上做同样的事情。

因此，为了使代码更清晰，最好只使用onchange事件进行选择。

如何在下拉列表中检测点击事件，但不能在Javascript中的选项菜单上检测（或区分两者）？

1 个答案: