如何防止选择选项中触发onclick事件

Question

我有一个选择，当单击它时会触发一个事件。但我想防止它在我单击相应选项时再次触发。

有办法做到吗？

Answer 1

您尝试使用 onchange 怎么样？因此，如果选择的内容没有变化。没有任何东西被触发。

Answer 2

只需使用 onchange 事件即可。这是一个例子：https://jsfiddle.net/rafb0vyw/2/

$('#sel').on('change', function() {
    alert('change');
})

Answer 3

    var select = document.querySelector("SELECT")
    var option = document.querySelector("OPTION")

    select.onclick = (e) => {
      console.log("SELECT:", e.target === select, e.target === option, e.target.tagName, e.target.value)
    }

    option.onclick = (e) => {
      console.log("OPTION:", e.target === select, e.target === option, e.target.tagName, e.target.value)
    }

    select.onchange = (e) => { alert("Never done") }
    option.onchange = (e) => { alert("Never done") }

  <select value = "nope">
    <option value = "hello">Select</option>
  </select>

大多数浏览器都会触发 SELECT 键并单击

SELECT

和

OPTION

。 进行

e.target.tagName === 'OPTION'

检查，您就有了适用于现代浏览器的解决方案。

这是我的 FF 在 RPI4 上的日志：

SELECT: true false SELECT hello  (when clicked on SELECT)
OPTION: false true OPTION hello   (when clicked on OPTION)
SELECT: false true OPTION hello   (when clicked on OPTION)

这就是在 Debian 上构建、在 Debian 11（64 位）上运行的 Chromium 版本 126.0.6478.164（官方版本）的外观：

SELECT: true false SELECT hello  (when clicked on OPTION)

对于我的旧 Chromium 浏览器，单击“选择”不会触发。因为事件不适用于旧 Chromium 中的选项，所以它实际上以与其他事件相同的方式从

SELECT

触发。

因此，有些浏览器单击

OPTION

会给出与其他浏览器单击

SELECT

完全相同的结果“SELECT: true false SELECT hello”。

e.target

中没有其他值会产生影响。没有跨浏览器的解决方案。

正如您在代码片段中看到的那样 -

onchange

永远不会触发

onclick

，所以您也不能使用它。

SELECT

标签用于进行选择并随后读取

value

- 而不是触发事件。如果您需要在

OPTION

上运行跨浏览器的事件，最好使用

DIV

并进行自己的选择。然后它在所有浏览器上的外观和行为都相同。