gpt4 book ai didi

javascript - html中Select元素的事件顺序

转载 作者:太空宇宙 更新时间:2023-11-04 13:28:47 27 4
gpt4 key购买 nike

到目前为止,我只在 chrome 浏览器中测试过。

我在下面定义了 html 选择元素:

HTML

<select class="ddl" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

我有以下脚本:

Javascript + jQuery

$(document).ready( function () {
$('.ddl').change( function () { alert('ddl changed'); });
$('.ddl').click( function () { alert('ddl clicked'); });
});

在浏览器中,- 如果您快速单击列表框中的一个项目,您将看到事件的顺序以 change 开始,然后是 click。- 如果您按住鼠标 10 秒然后松开(长按),click 触发然后 change

jsFiddle

我将代码更改为下面的脚本(添加 mouseup 事件),

Javascript + jQuery

$(document).ready( function () {
$('.ddl').change( function () { alert('ddl changed'); });
$('.ddl').click( function () { alert('ddl clicked'); });
$('.ddl').mouseup( function () { alert('ddl mouseup'); });
});

我得到 mouseupchange,然后 click,无论点击速度如何。 jsFiddle

事件的顺序不是应该保持不变吗?这是 Chrome 的错误吗?

更新

在firefox中,changemouseup,然后是clicked快速点击,只有click事件缓慢点击即可消除。

在 IE11 中,change 然后 click 在快速点击时触发,只有 mouseup 在慢速点击时触发。

根据 adeneo 的建议进行更新:

jsFiddle1

Javascript + jQuery

$(document).ready( function () {
$('.ddl').change( function () { console.log('ddl changed'); });
$('.ddl').click( function () { console.log('ddl clicked'); });
});
  • Chrome:没有变化
  • Firefox:没有变化
  • IE11:无变化

jsFiddle2

Javascript + jQuery

$(document).ready( function () {
$('.ddl').change( function () { console.log('ddl changed'); });
$('.ddl').click( function () { console.log('ddl clicked'); });
$('.ddl').mouseup( function () { console.log('ddl mouseup'); });
});
  • Chrome:没有变化
  • Firefox:没有变化
  • IE11:无变化

根据 Wesley Murch 的建议更新:

我有一个正在使用的软件包。软件包动态生成 HTML(模板驱动)。我正在研究的功能是级联下拉菜单。有一些下拉菜单具有显示层次结构的属性。为了建立依赖关系,我想我会绑定(bind)到更改事件并调用 web 服务来更新子下拉列表。现在我面临的困境是存在绑定(bind)到各种事件的预先存在的代码。我认为预先存在的代码中有一些代码会停止处理后续事件。我暂时无法更改该代码。我一直以为change事件是在click事件之前触发的。如果您在 chrome 中快速单击它,它工作正常,但如果您在考虑选择时按住鼠标几秒钟,我的级联下拉代码代码不会被调用。

抱歉解释冗长。

最佳答案

<script>
$(document).ready(function () {
$('.ddl').change(function () {
console.log("change");
});
$('.ddl').click(function () {
console.log("click");
});
});
</script>

<select class="ddl" size="1">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>

顺序

点击选择.html:15更改 select.html:112个点击 select.html:15更改 select.html:11点击

关于javascript - html中Select元素的事件顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24250669/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com