在WebKit浏览器中，选择表单的Blur()事件不会触发。

Question

我有一个简单的元素，其中包含几个元素：<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 }); 当在parentDiv上触发mouseleave事件时，我确保表单模糊处理，以便选项不会保持展开状态。一旦它被模糊处理，我可以安全地隐藏包含的<div id="selectFormDiv">，以便表单及其容器正确隐藏。 $("#parentDiv").mouseleave(function(){ $("#dollarAmount").blur(); $("#selectFormDiv").hide(); }); 我的问题是：这在IE8和Firefox 5.1中有效，但在Chrome 12.0或Safari 5.1中无效。我已经检测到浏览器是否为Webkit并使用不同的命令进行测试，似乎blur()不能使<select>表单折叠（正确的术语？试图隐藏下拉选项）。如果上述代码离开parentDiv时展开选项，则不会隐藏选项。在Chrome中触发表单上的hide()事件可以隐藏选项（在Opera中仍然没有成功），但当然也会导致整个表单被隐藏：$("#parentDiv").mouseleave(function(){ if($.browser.webkit) { $("#dollarAmount").hide(); $("#selectFormDiv").hide(); } else { $("#dollarAmount").blur(); //blur only triggers for non webkits? $("#selectFormDiv").hide(); } }); 我尝试了几种其他事件/方法，包括在 mouseleave 上触发 document.mouseup 以触发 blur()。我尝试使用 focusout、change 和 click 事件来折叠选择表单，但没有成功。有没有办法通过事件调用在 Webkit 浏览器中隐藏 <select> 表单的 <option>？编辑：为了清晰起见，实际的 blur() 事件似乎已经被触发了。我让 dollarAmount 表单监听 onblur 只是为了打印到控制台。控制台输出确实执行了，但是当调用 blur() 时，该表单并没有像非 Webkit 浏览器那样折叠。这里有一个示例来阐述问题: http://jsfiddle.net/JpWLb/4/ 在非webkit浏览器中: 点击<select>元素，但不要在<option>展开后悬停。当选项仍然展开时，鼠标移出包含的div。在Firefox和IE中，结果的$("#mySelect").blur()调用导致选项收缩（耶！）。然而，在WebKit浏览器上，模糊扩展的<select>元素似乎没有任何作用：选项仍然保持展开状态。我期望的结果是，所有浏览器在鼠标移出包含的div时隐藏已展开的选项。

- Jared Sheets

---

你尝试过将焦点设置在一个不可见的元素上而不是使当前元素失焦吗？ - Joseph Marikle

你尝试过添加一个假的<input type="text" />并将焦点聚焦到它上面吗？ - Wulf

好主意。我没有想到那样做。我尝试将焦点集中在几个不同的对象上（虚拟对象、页面上的其他选择表单和文档本身），但我从未能够使聚焦的选择表单模糊。 - Jared Sheets

Answer 1

我不认为这是可能的。似乎当在webkit中激活选择元素时，DOM不会识别除单击之外的任何鼠标事件。因此，问题不是您的blur()方法未触发。问题是mouseleave()方法未触发！请参见此fiddle：http://jsfiddle.net/JpWLb/。打开控制台。当你移动鼠标时，它将不断地得到字符串“ok”。但是一旦你点击选择元素，那些控制台日志将停止。

- maxedison

---

Maxedison：嗯，有趣。我还没有能够给予它应有的尊重（目前不在我的电脑上，我的项目也在上面）。但我计划明天早上仔细思考并回复一些评论，可能会接受答案。非常感谢 :) - Jared Sheets

Maxedison：我已经在Chrome、IE、Firefox和Safari中查看了那个fiddle。当鼠标位于<option>元素内部时，Chrome和Safari都停止触发'mousemove'事件。IE也表现出这种行为，但Firefox仍然会在<option>元素内部触发mousemove事件。虽然如此，似乎我仍然应该能够检测到父div上的mouseleave并触发子<select>元素上的blur()。我会尝试在稍后提供一个fiddle。 - Jared Sheets

Chrome和Safari都是基于Webkit，这就解释了它们的相似行为。根据我发布的内容，我不确定为什么你会说：“看起来我仍然应该能够检测到mouseleave”。正如我的示例展示的那样，除了单击之外，好像没有任何鼠标事件被DOM注册。但是我很想看到一个解决方案……虽然我自己还没有遇到过这个问题，但也许将来会遇到 :) - maxedison

我正在尝试检测包含<select>表单的父<div>上的mouseleave事件，而不是<select>表单本身。我在原帖末尾放了一个演示链接，展示了我所使用的设置。代码在非Webkit浏览器上运行不完美（鼠标悬停在<option>上也会导致表单缩回），但详细说明了我正在经历的问题。 - Jared Sheets

我理解这一点。但我的意思是，除了点击事件之外，没有任何DOM事件会触发任何东西，包括父级div、活动选择元素等。 - maxedison