我可以在<option>元素上放置一個EventListener嗎？

我正在嘗試向<option>元素添加一個 EventListener 。

我嘗試了各種方法，但沒有結果。我正在使用 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>上的檔案，我可以看到它具有DOM 介面。此介面應該具有從.<option>HTMLOptionElementHTMLElement

HTMLOptionElement 介面表示元素并繼承 HTMLElement 介面的所有屬性和方法。- MDN

所以我想知道，我可以以某種方式將 eventListeners 注冊到<option>Element 嗎？

uj5u.com熱心網友回復：

問題不在于在元素上注冊事件處理程式，而是瀏覽器不會option在下拉元素中的元素（或至少，不可靠的跨瀏覽器）上觸發事件select。

例如，就我所知，Chrome 和 Firefox 不會option在下拉元素中的select元素上觸發任何事件，即使您可以在它們上注冊事件處理程式，甚至在它們上觸發您自己的事件。例如，在下面，optionChrome 或 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>
<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>

很遺憾，如果您想在指標懸停在選項上方時執行某些操作，則必須使用selectand以外的其他內容option。無論是鍍鉻也不火狐甚至火災pointerover的document時候從一個指標移動option到串列中的下一個。

為了完整起見，請注意某些事件（包括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>

標籤：javascript html Vue.js dom事件 javascript 事件

上一篇：如何在陣列中獲取在Discordbotjs中具有角色的所有用戶

下一篇：設定帶有過濾器和排序的HTML表格