javascript 单击事件侦听器不会在选择选项时触发

disho6za 于 2023-02-28 发布在 Java

关注(0)|答案(1)|浏览(177)

我想了解为什么在选择select中的选项时不触发click事件。我创建了一个包含几个选项的select，并在文档上添加了click事件，如下所示

document.addEventListener('click', (event) => console.log(event.target));

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

当我单击页面（文档）中的某个位置时，它会清楚地记录目标元素。
当我单击select时，它会记录目标select元素。
但是当我点击其中一个选项从选择它似乎没有触发点击事件。请帮助我理解这一点。

JavaScript

来源：https://stackoverflow.com/questions/75584063/click-event-listener-doesnt-trigger-on-select-option

1条答案

按热度按时间

dwbf0jvd1#

在您的示例中，您在document上注册了eventListener，因此，顶部文档上的每个单击事件都会被触发。当您单击select中的某个选项时，它不会触发单击事件，因为Options不在文档上，而是在select字段上。如果您希望处理select字段的单击，则必须将Event Listener设置为这个字段，而不是文档

document.addEventListener('click', (event) => console.log(event.target));
document.getElementById("cars").addEventListener('click', (event) => console.log(event.target));

<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

但如果您只想知道select字段是何时更改的，则必须在EventListener中注册change事件，而不是click

赞(0）回复(0）举报 2023-02-28

我来回答

javascript 单击事件侦听器不会在选择选项时触发

1条答案

相关问题

热门标签

最新问答