Blur（）事件未在webkit浏览器中为选择表单触发 [英] Blur() event not firing in webkit browsers for select form

问题描述

我有一个简单的< select> 元素，其中包含多个< option> 元素：

I have a simple <select> element that has several <option> elements within:

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

此< select> 表单仅限当用户将鼠标悬停在页面上的另一个元素上时显示：

This <select> form is only shown when the user mouses over another element on the page:

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

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

Upon triggering the mouseleave event on the parentDiv, I make sure the form is blurred so that the options do not remain expanded. Once it is blurred, I can safely hide the containing <div id="selectFormDiv"> so that the form and its container properly hide.

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

我的问题是：这适用于IE8和Firefox 5.1，但不适用于Chrome 12.0或Safari 5.1 。我已经检测到浏览器是否是webkit并使用不同的命令进行测试，而且似乎 blur（）不会导致<选择> 表单以折叠（正确的术语？尝试隐藏已删除的选项）。如果在离开 parentDiv 时扩展了上述代码，则不会隐藏这些选项。触发表单上的 hide（）事件会隐藏Chrome中的选项（在Opera中仍然没有运气），但当然也会导致整个表单隐藏：

My issue is: this works in IE8 and Firefox 5.1, but does not in Chrome 12.0 or Safari 5.1. I've detected if the browser is a webkit and used different commands to test, and it just seems that blur() does not cause a <select> form to collapse (correct term? Attempting to hide the options that were dropped down). The above code does not hide the options if they were expanded upon leaving the parentDiv. Triggering the hide() event on the form does hide the options in Chrome (still no luck in Opera), but of course also causes the entire form to hide:

$("#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 ，更改，点击要折叠选择表单的事件，但没有成功。

I've tried several other events/methods, including triggering document.mouseup upon mouseleave to trigger a blur(). I've attempted to use focusout, change, and click events to collapse the select form, but with no success.

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

Is there any way to hide a <select> form's <option>s in webkit browsers through an event call?

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

For clarity, the actual blur() event does seem to be triggering. I have the dollarAmount form listening for onblur just to print to the console. The console print does execute, but the form is just not collapsed as it is in non webkit browsers when blur() is called.

这是一个解决问题的小提琴： http://jsfiddle.net/JpWLb/4 /
在非webkit浏览器上：点击< select> 元素，但不要将鼠标悬停在任何<选项> ; s一旦推出。随着选项仍然扩展，鼠标移出包含div。在firefox和IE中，生成的 $（＃mySelect）。blur（）调用会导致选项缩进（是的！）。但是，在webkit浏览器上，模糊扩展的< select> 元素似乎什么都不做：选项仍然展开。我希望的结果是所有浏览器在鼠标移出包含div时隐藏扩展选项。

Here's a fiddle to elaborate on the problem: http://jsfiddle.net/JpWLb/4/ On non webkit browser: Click the <select> element, but do not hover over any <option>s once they roll out. With the options still expanded, mouse out of the containing div. In firefox and IE, the resulting $("#mySelect").blur() call causes the options to retract (yay!). However, on webkit browsers, blurring the expanded <select> element seems to do nothing: the options remain expanded. My desired outcome is for all the browsers to hide the expanded options upon mousing out of the containing div.

推荐答案

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

I don't think this is possible. It appears that when the select element is activated in webkit, the DOM doesn't recognize any mouse events other than a click. So the problem isn't that your blur() method isn't firing. The problem is that the mouseleave() method isn't firing!

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

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

Open your console. When you move your mouse around, it will constantly get fed the string "ok". But as soon as you click on the select element, those console logs will cease.

这篇关于Blur（）事件未在webkit浏览器中为选择表单触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！