Jquery 1.4 - 选择 - onchange 无需点击即可触发 - Firefox

2023-12-11

我看到非常奇怪的行为 - 在 Firefox 中,如果您有一个选择下拉菜单,但没有选择任何项目,则 onchange 事件会触发 onblur - 即使您只是将焦点更改到页面上的不同元素。我的选择只是一个普通的选择:

<select id="mySelect">
        <option value="Value0">Value 0</option>
        <option value="Value1">Value 1</option>
        <option value="Value2">Value 2</option>
</select>

我的js是:

$("#mySelect").change(function(){
    alert('Change event fired'); 
});

$("#mySelect").attr('selectedIndex', '-1');

看看这个jsfiddle:http://jsfiddle.net/W8QR4/

如果我有什么方法可以防止 onchange 触发havent实际上单击了一个新选项(除了升级到较新版本的 jquery 之外。我知道,我现在坚持使用它)?

更改事件在不应该的时候触发。我知道代码本身确实有效。

复制步骤:

  1. 单击选择的小向下箭头
  2. 将鼠标悬停在值 1 或值 2 上,但是不要选择它
  3. 单击other输入 - 两次,因此焦点从选择中移除并传递到另一个元素

这只适用于在下拉列表中选择任何项目之前。一旦做出选择,这种情况就不会发生


这是我想出的答案,欢迎评论/改进:

$("#mySelect").attr('selectedIndex', '-1');

//Capture the initial selection of each dropdown
$('select').each(function() {
    $(this).data('initialSelection', String($(this).attr('selectedIndex')));
});

//Add click event to all options. When clicked, change initial selection and unbind the click event
$('select option').click(function() {
    $(this).parent().data('initialSelection', '').attr('selectedIndex', this.index).find('option').unbind('click');
});

//Onchange, check if initial selection is still -1. (If there is a click it will be reset to '') 
//Otherwise, it was just a hover - reset selected index to -1
$('select').change(function(e){
    if($(this).data('initialSelection') == '-1'){
         $(this).attr('selectedIndex', '-1');
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Jquery 1.4 - 选择 - onchange 无需点击即可触发 - Firefox 的相关文章

  • 当前元素的警报 ID

    我正在使用以下代码来提醒当前元素的 id
  • BeautifulSoup4:选择属性不等于x的元素

    我想做这样的事情 soup find all td attrs class foo 我想找到所有不具有 foo 类的 td 显然上面的方法不起作用 那怎么办呢 BeautifulSoup确实使 汤 变得美丽且易于使用 You 可以传递一个函
  • 同一元素上的“itemprop”和“rel”属性

    使用是否有效itemprop属性and the rel同一元素上的属性 示例来自Google 的站点名称文档 https developers google com search docs data types sitename包含 这给出
  • 如何组合多个jquery函数

    如果你查看下面的 jquery 代码 你会看到著名的 文档 ready 函数 这将启动脚本 我在网上几乎所有 jquery 代码示例中都看到了这一点 我想知道 如果我在一个文件中运行 5 个不同的代码函数 我是否需要使用 文档 ready
  • jQuery:查找具有特定自定义属性的元素

    我只想找到具有特定自定义属性值的元素 例如 我想找一个div其具有属性data divNumber 6 var number 6 var myDiv data divNumber number 我尝试使用http api jquery co
  • 检测 Webkit/Chrome 中 HTML5 数字控件更改的事件?

    HTML5 为我们提供了一些新的输入元素 例如
  • 如何使用CSS缩放图像以填充div并保持纵横比?

    我想用一个 div 填充img 保持纵横比并根据需要拉伸宽度或高度以适应 div style width 80px height 80px img src div 我怎样才能实现它 如果图像不是二次方的 则必须将其 放大 并根据哪一侧较大而
  • 取消选择所有复选框后,客户端过滤器显示所有项目

    加载时 复选框将取消选中 并显示所有列表项 当选中过滤器时 将显示相关的列表项 我遇到的问题是 当您再次取消选中所有复选框时 我需要显示所有项目而不是隐藏 这是我的小提琴 http jsfiddle net amesy B9Hnu 124
  • jQuery:将文本区域滚动到给定位置

    我有一个包含很多文本的文本区域
  • .removeClass 从所有元素(相对于单个定义的元素)

    我将如何使用 removeClass 删除所有匹配的类 而不是单独调用每个元素 所以代替这个 input removeClass CO form alert select removeClass CO form alert input se
  • JQuery 菜单图标 RTL

    我正在尝试在阿拉伯语 RTL 页面中使用 jQuery 菜单 我可以将其设为 RTL 但图标应该是ui icon carat 1 w not ui icon carat 1 e 我创建jsfiddle在这里 http jsfiddle ne
  • 可以禁用幻灯片的触摸模拟但不能禁用滚动条(危险的滑动器)吗?

    我的页面上有一个危险的滑动器 它成功地模拟了幻灯片和随附滚动条上的触摸事件 允许单击鼠标并移动以向左或向右滑动幻灯片 这很好 但我现在在滑动器内的幻灯片上调用了可拖动 这意味着我需要停止此触摸模拟 拖动幻灯片并同时移动它们会引起混乱 但仅限
  • 如何在html中定义条件换行符?

    我希望这根绳子断在 如果需要的话 没有地方可以写了 7 380 Ft 159 Ft term kd jjal like 7 380 000 Ft 159 125 Ft term kd jjal 如何在html中实现这一点 nbsp 产生 错
  • 如何更改 HTML 文档的“实际编码”?

    我通过 W3C HTML 验证器运行我的网页并收到此错误 编码ascii不是字符的首选名称 使用中的编码 首选名称是 us ascii Charmod C024 第 5 行 第 70 列 内部编码声明 utf 8 不同意 文档的实际编码 u
  • WordPress 子主题包括包含文件

    我在一家WordPress使用 AMPPS 作为本地主机在我的本地计算机上进行设置 使用 Delta 主题 我创建了一个子主题 delta2 child 初始设置效果很好 但是 我需要更改包含文件夹中名为 home slider php 的
  • 使用flex-basis控制行上显示的项目数

    我想在使用 Flex 时将元素推出以隐藏它们 例如 如果flex basis为 50 仅显示两个项目弯曲到给定空间 而其他元素则在overflow hidden 领土 Or if flex basis为 25 则仅显示 4 个 Flex 元
  • Google Apps 脚本中 $.ajax() 的服务器端等效项是什么?

    我想在 Google App 脚本中从服务器端代码执行 HTTP 请求Authorization标头 是否有用于发送 HTTP 请求的 App Script API Google Apps 脚本中的这段代码相当于什么 var api URL
  • 从更多元素中仅获取唯一名称

    我动态渲染了 HTML 其中列出了未确定数量的单选按钮 这些按钮的名称代表数据库中的某些 id 我需要收集收音机的所有唯一名称 这是一个例子
  • 将网站加载到 DIV 中

    当我在文本框中写入 URL 然后单击提交按钮时 如何实际从网站检索数据 我希望将数据放入我拥有的 div 中 这可能吗 我已经尝试过这个 但它不起作用
  • 将引导程序弹出框保留在视口内

    我正在尝试使用带有按钮的侧边栏创建一个菜单 每个按钮都有一个指定的包含相关数据的弹出窗口 不幸的是 其中一个弹出窗口可能包含任意数量的行 并且在某些情况下它可能部分位于视口之外 See http jsfiddle net bfd9f 1 h

随机推荐