Jquery 1.4 - select - onchange没有点击 - Firefox [英] Jquery 1.4 - select - onchange fired WITHOUT click- Firefox

问题描述

我看到了非常奇怪的行为 - 在Firefox中，如果您没有选择任何项目的选择下拉菜单，onchange事件会触发onb​​lur - 即使您只是将焦点更改为页面上的其他元素。我的选择只是一个普通的选择：

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

和我的js是：

<$ p $ （）;
alert（'Change event fired'）;
}）;

$（＃mySelect）。attr（'selectedIndex'，'-1'）;

查看此jsfiddle： http://jsfiddle.net/W8QR4/

如果我没有任何方法阻止onchange被触发实际上点击了一个新选项（除了升级到更新版本的jquery之外，我知道，我现在坚持使用它）？

当SHOULDNT成为时，更改事件正在触发。

$ b 复制步骤：

1. 点击选择
上的向下箭头

2. 将鼠标悬停在值1或值2上，但不选中


3. 单击其他输入 - 两次，以便将焦点从select中移除并传递给其他元素。
   

只有在下拉菜单中选中任何项目之前，此功能才有效。一旦选择完成，这不会发生

改善：

  $（＃mySelect）。attr（'selectedIndex'，'-1'）; 
 
 //捕获每个下拉菜单的初始选择
 $（'select'）。each（function（）{
 $（this）.data（'initialSelection'，String （$（this）.attr（'selectedIndex'）））; 
}）; 
 
 //将点击事件添加到所有选项。单击后，更改初始选择并取消绑定单击事件
 $（'select option'）。click（function（）{
 $（this）.parent（）。data（'initialSelection'，'' ）.attr（'selectedIndex'，this.index）.find（'option'）。unbind（'click'）; 
}）; 
 
 // Onchange，检查初始选择是否仍为-1。 （如果有一次点击，它将被重置为''）
 //否则，它只是一个悬停 - 将选定的索引重置为-1 
 $（'select'）。change（function（e ）{
 if（$（this）.data（'initialSelection'）=='-1'）{
 $（this）.attr（'selectedIndex'，'-1'）; 
} 
}）; 
  

I'm seeing really strange behavior - in Firefox, if you have a select dropdown without any item selected, the onchange event fires onblur - even if you're just changing focus to a different element on the page. My select is just a run-of-the-mill select:

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

and my js is:

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

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

See this jsfiddle: http://jsfiddle.net/W8QR4/

Is there any way to prevent the onchange from firing if I havent actually clicked a new option (other than upgrading to a newer version of jquery. I know, I'm stuck with it for now)?

The change event is firing when it SHOULDNT be. I know the code itself actually works.

Steps to replicate:

1. Click the little down arrow of the select
2. Hover over Value 1 or Value 2 but do not select it
3. Click in the other input - twice, so focus is removed from the select and passed to the other element

This only works BEFORE any item is selected in the dropdown. Once a selection is made this doesnt happen

解决方案

Here's the answer I came up with, feel free to comment/improve:

$("#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');
    }
});

这篇关于Jquery 1.4 - select - onchange没有点击 - Firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！