我可以在元素上放置事件侦听器<option>吗？

Question

我正在尝试将EventListener添加到<option>元素中。

我尝试了各种方法，但都没有结果。我正在使用VueJS，所以我尝试使用他们的事件绑定机制。

VueJS-事件绑定-仅适用于<select>

<select @mouseover="testValue = true" @mouseleave="testValue = false" ref="select">
<option v-for="(option, index) in selectionSet" :key="index"
:value="option.id" :disabled="option.disabled" @mouseover="testValue = true" @mouseleave="testValue = false">
{{option.name}}
</option>
</select>

所以我很自然地选择了RAW plainJS的方式。

PlainJS-AddEventListener((-元素有效，但eventListener不会注册

this.$refs.select.options.forEach((el) => {
el.addEventListener('pointerover', () => { window.console.log('AAAAH'); });
if (!el.disabled) window.console.log(el.value);
});

是的，我选择了多个活动名称。

---

那该怎么办->阅读文档

查看MDN上的<option>文档，我可以看到<option>具有HTMLOptionElementDOM接口。该接口应该具有从HTMLElement继承的所有属性和方法。

HTMLOptionElement接口表示元素，并继承HTMLElement接口的所有属性和方法。-MDN-

所以我想知道，我可以以某种方式将eventListener注册到<option>元素吗？

Answer 1

问题不在于在元素上注册事件处理程序，而在于浏览器不会在下拉select元素中的option元素上触发事件(或者至少不会可靠地跨浏览器(。

例如，据我所知，Chrome和Firefox不会在下拉式select元素中的option元素上触发任何事件，即使您可以在它们上注册事件处理程序，甚至在它们上触发自己的事件。例如，在下面的例子中，Chrome或Firefox不会自动在option元素上触发任何事件，但如果你点击按钮明确地向它触发一个事件，它就会起作用：

const option = document.querySelectorAll("option")[1];
function optionEventHandler(event) {
console.log(event.type, this.textContent);
}
// None of these fire on Chrome except when code explicitly
// does it with `dispatchEvent`, as far as I can tell:
for (const eventName of ["click", "mouseover", "pointerover", "mouseenter"]) {
option.addEventListener(eventName, optionEventHandler);
}
document.querySelector("select").addEventListener("click", function() {
console.log("click on select", this.value);
});
// Explicitly firing an event at the element:
document.querySelector("input[type=button]").addEventListener("click", function() {
option.dispatchEvent(new Event("click"));
});

<select>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<div>
<input type="button" value="Send 'click' to B">
</div>

遗憾的是，如果您想在指针位于选项上方时执行某些操作，则必须使用select和option以外的其他操作。当指针从列表中的一个option移动到下一个时，Chrome和Firefox甚至都不会在document处触发pointerover。

为了完整起见，请注意，一些事件(包括pointerover(在非下拉select元素中工作，至少在Chrome和Firefox上是这样：

const option = document.querySelectorAll("option")[1];
function optionEventHandler(event) {
console.log(event.type, this.textContent);
}
// None of these fire on Chrome except when code explicitly
// does it with `dispatchEvent`, as far as I can tell:
for (const eventName of ["click", "mouseover", "pointerover", "mouseenter"]) {
option.addEventListener(eventName, optionEventHandler);
}
document.querySelector("select").addEventListener("click", function() {
console.log("click on select", this.value);
});
// Explicitly firing an event at the element:
document.querySelector("input[type=button]").addEventListener("click", function() {
option.dispatchEvent(new Event("click"));
});

<select size="5">
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
<option>E</option>
</select>
<div>
<input type="button" value="Send 'click' to B">
</div>