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();
    }
});

我尝试了其他一些事件/方法，包括mouseleave blur()以触发focusout。我尝试使用change，click和<select>事件来折叠选择表单，但没有成功。

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

编辑：为清楚起见，实际的blur（）事件似乎确实在触发。我有onblur形式正在监听blur()只是打印到控制台。控制台打印确实执行，但是当调用<select>时，表单不会像在非webkit浏览器中那样折叠。

这是一个解释问题的小提琴：triggering document.mouseup 在非webkit浏览器上：单击<option>元素，但在推出后不要将鼠标悬停在任何$("#mySelect").blur()上。随着选项仍然扩展，鼠标移出包含div。在firefox和IE中，生成的<select>调用会导致选项缩进（yay！）。但是，在webkit浏览器上，模糊扩展的{{1}}元素似乎无能为力：选项仍然扩展。我希望的结果是所有浏览器在鼠标移出包含div时隐藏扩展选项。

Answer 1

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

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

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

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

1 个答案: