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

我尝试了其他几种事件/方法，包括 triggering document.mouseup在 mouseleave 之后触发 blur() .我尝试使用 focusout , change , 和 click折叠选择表单的事件，但没有成功。

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

编辑:为清楚起见，实际的 blur() 事件似乎确实在触发。我有 dollarAmount表单监听 onblur只是打印到控制台。控制台打印确实执行了，但是当 blur() 时，表单并没有像在非 webkit 浏览器中那样折叠。被称为。

这里有一个 fiddle 来详细说明这个问题:http://jsfiddle.net/JpWLb/4/在非 webkit 浏览器上:单击 <select>元素，但不要将鼠标悬停在任何 <option> 上一旦他们推出。在选项仍然展开的情况下，将鼠标移出包含的 div。在 firefox 和 IE 中，生成的 $("#mySelect").blur() call 导致选项收回(耶!)。然而，在 webkit 浏览器上，模糊扩展的 <select> element 似乎什么都不做:选项保持扩展。我想要的结果是所有浏览器在鼠标移出包含的 div 时隐藏扩展选项。

Answer 1

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

请参阅此 fiddle :http://jsfiddle.net/JpWLb/

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