Blur()事件未在webkit浏览器中为选择表单触发

Question

我有一个简单的<select>元素,其中包含以下几个<option>元素:

<select id="dollarAmount">
    <option>select dollar amount</option>
    <option>$5</option>
    <option>$10</option>
    <option>$15</option>
    <option>$20</option>
</select>

<select>只有当用户将鼠标悬停在页面上的另一个元素上时,才会显示此表单:

$("#parentDiv").mouseenter(function(){  
    $("#selectFormDiv").show();  //dollarAmount contained in this div
});

在触发mouseleave事件时parentDiv,我确保表单模糊,以便选项不会保持展开状态.一旦模糊,我可以安全地隐藏包含,<div id="selectFormDiv">以便表格及其容器正确隐藏.

$("#parentDiv").mouseleave(function(){  
    $("#dollarAmount").blur();
    $("#selectFormDiv").hide();
});

我的问题是:这适用于IE8和Firefox 5.1,但不适用于Chrome 12.0或Safari 5.1.我已经检测到浏览器是否是一个webkit并使用不同的命令进行测试,它似乎blur()不会导致<select>表单崩溃(正确的术语？试图隐藏掉落的选项).上面的代码不会隐藏选项,如果他们在离开时扩展parentDiv.触发hide()表单上的事件会隐藏Chrome中的选项(在Opera中仍然没有运气),但当然也会导致整个表单隐藏:

$("#parentDiv").mouseleave(function(){
    if($.browser.webkit) {
        $("#dollarAmount").hide();
        $("#selectFormDiv").hide();
    }
    else {
        $("#dollarAmount").blur();     //blur only triggers for non webkits?
        $("#selectFormDiv").hide();
    }
});

我试过几个其他事件/方法,包括触发document.mouseup时mouseleave触发blur().我试图使用focusout,change和click事件来折叠选择表单,但没有成功.

有没有办法通过事件调用在webkit浏览器中隐藏<select>表单<option>？

编辑:为清楚起见,实际的blur()事件似乎确实在触发.我有一个dollarAmount表单,onblur只是打印到控制台.控制台打印确实执行,但表单不会像blur()调用非webkit浏览器时那样折叠.

这里有一个解释问题的小提琴:http://jsfiddle.net/JpWLb/4/ 在非webkit浏览器上:单击<select>元素,但<option>一旦它们推出就不要悬停在任何s上.随着选项仍然扩展,鼠标移出包含div.在firefox和IE中,生成的$("#mySelect").blur()调用会导致选项缩进(yay!).但是,在webkit浏览器上,模糊扩展<select>元素似乎什么都不做:选项仍然扩展.我希望的结果是所有浏览器在鼠标移出包含div时隐藏扩展选项.

Answer 1

我认为这是不可能的。看来，当在 webkit 中激活 select 元素时，DOM 无法识别除单击之外的任何鼠标事件。所以问题不在于你的blur()方法没有触发。问题是mouseleave()方法没有触发！

看到这个小提琴：http://jsfiddle.net/JpWLb/

打开你的控制台。当您移动鼠标时，它会不断地输入字符串“ok”。但是，一旦您单击选择元素，这些控制台日志就会停止。