模糊事件不会在IE7和IE6中被触发
[英]Blur Event Does not get Fired in IE7 and IE6
问题描述
I have a dropdown Menu where in a div is clicked and List is shown. 
我有一个下拉菜单，单击一个div，显示列表。
On focus out I am supposed to hide the list(ie when the user clicks or focuses on some other element and not on mouse out). 在焦点上我应该隐藏列表（即当用户点击或关注某些其他元素而不是鼠标移出时）。 Hence my obvious choice was onblur . 因此，我明显的选择是onblur 。
Now the JavaScript seems to work in Firefox but not in IE thats because my div has a sub div with a height and width specified. 现在JavaScript似乎在Firefox中工作，但在IE中却没有，因为我的div有一个指定高度和宽度的子div。 This is reproducible in a test file. 这在测试文件中是可重现的。 I am using jQuery. 我正在使用jQuery。
Is this a known issues in Internet Explorer? 这是Internet Explorer中的已知问题吗？ And what is the work around? 什么是工作？
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option div {height:18px;}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
<div class="selected_option" tabindex="0">
<div>anywhere in the page</div>
</div>
</body>
</html>
6 个解决方案
解决方案1
7 2009-08-24 18:50:54
The IE-proprietary focusout event worked for me: IE专有的focusout事件对我focusout ：
$('.selected_option').bind('focusout', function(){
alert('focusout');
});
Again, this is proprietary (see quirksmode ) but may be appropriate if it solves your problem. 同样，这是专有的（参见quirksmode ），但如果它可以解决您的问题，则可能是合适的。 You could always bind to both the blur and focusout events. 您始终可以绑定blur和focusout事件。
解决方案2
2 2010-10-28 06:54:34
onkeypress="this.blur(); return false;"
它适用于所有IE版本
解决方案3
1 2009-08-14 14:19:36
First realize that focus and blur events are only supported on focusable elements . 首先要意识到focus和blur事件仅在可聚焦元素上得到支持。 To make your <div> s focusable you need to look at the tabindex property . 要使<div>成为可聚焦的，您需要查看tabindex属性 。
解决方案4
1 2009-08-24 14:24:55
Try using an anchor tag instead of a div since these are naively focusable. 尝试使用锚标记而不是div，因为这些是天真的焦点。 You can set the href of the anchor to "javascript:void(0)" to prevent it from actually linking to a pageand use the css property "display: block" to make it render like a div. 您可以将锚点的href设置为“javascript：void（0）”以防止它实际链接到页面并使用css属性“display：block”使其像div一样呈现。 Something like this: 像这样的东西：
<html>
<head>
<title>Exploring IE</title>
<style type="text/css">
/** Exploring IE**/
.selected_option
{
display: block;
height:18px;
}
</style>
<script type="text/javascript" src="jquery-1.3.2.min9919.js"></script>
<script type="text/javascript">
$().ready(function(){
$('.selected_option').blur(function(){
alert('blurred');
});
});
</script>
</head>
<body>
<a href="javascript:void(0)" class="selected_option">anywhere in the page</a>
</body>
</html>
Haven't tested this, but I think it should work. 没有测试过这个，但我认为它应该有效。
解决方案5
0 2009-08-14 12:38:45
Try: 尝试：
$('.selected_option').bind('blur', function(){
alert('blurred');
});
Also you can make another trick - handle all mouse clicks or/and focus events and if some another control is selected, then your own is blurred (of course if it was selected previously). 此外，你可以制作另一个技巧 - 处理所有鼠标点击或/和焦点事件，如果选择了另一个控件，那么你自己的模糊（当然，如果它之前被选中）。
解决方案6
0
我已经将div的tabIndex属性设置为可聚焦，而且如果我注释模糊事件的高度，那么我认为这不是问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.