Div 元素上的 jquery blur() 事件问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1985292/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Problem with jquery blur() event on Div element
提问by Jehanzeb afridi
I have problem hiding certain popup wich are based on divs. when i click out side those divs they dont hid. Here is the sample code what i m doing..
我在隐藏某些基于 div 的弹出窗口时遇到问题。当我点击它们不隐藏的那些 div 时。这是我在做什么的示例代码..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../JS/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#MainCanvas div").blur(function()
{
alert("blured");
});
});
</script>
</head>
<body>
<div id="MainCanvas" style="width: 400px; height: 350px; border: solid 1px black;">
<div class="ui-widget-content" style=" vertical-align:middle; height:60px; border: solid 2px black; width:300px;">
Drag me around
</div>
</div>
</body>
</html>
回答by Rafael
If I remember correctly, only A, AREA, BUTTON, INPUT, LABEL, SELECT, TEXTAREA create focus/blur events. If you want to hide the popup by clicking outside it, you have to for example listen to click events on document and check if the event occured inside or outside the popup.
如果我没记错的话，只有 A、AREA、BUTTON、INPUT、LABEL、SELECT、TEXTAREA 创建焦点/模糊事件。如果您想通过在弹出窗口外部单击来隐藏弹出窗口，则必须例如侦听文档上的单击事件并检查该事件是发生在弹出窗口内部还是外部。
Sample code:
示例代码：
$(document).click(function(e){
if($(e.target).is('#MainCanvas, #MainCanvas *'))return;
$('#MainCanvas').hide();
});
回答by Jaydeep Shil
for div blur focusout() will work
对于 div 模糊 focusout() 将起作用
$('#divCustomerGroup').focusout(function () {
alert('yo');
});
回答by Viktor Oleksyn
You can add tabindexattribute on divtag:
您可以tabindex在div标签上添加属性：
<div class="my_div" tabindex="3"></div>
and after that blur event will be working:
在那之后模糊事件将起作用：
$('.my_div').blur(function(){
//code ...
});
回答by Hemant Shinde
I have done it by using the following code
我已经使用以下代码完成了
<script>
$(document).click(function (e) {
if ($(e.target).is('._dpcontrol, ._dpcontrol *'))
return;
$('._dpcontrol').each(
function (index, value) {
var retrivedtextbox = $(this).find('._dpitem')[0];
$(retrivedtextbox).fadeOut();
});
});
</script>
回答by rahul
The best idea would be to handle the mousedown event and check the element that invoked the event.
最好的办法是处理 mousedown 事件并检查调用该事件的元素。
回答by Lukas
I borrowed a tip from multiple solutions to make something easy. Basically when I focus something I want it to appear, but if I click out of it, I want it to hide again. So, if I click on something INSIDE the div that appeared, my click then goes to see if it finds a parent called "DivHoldingcustomController". If so, do nothing. If it does not (because I clicked somewhere else, so whateve I clicked on does not have this parent), then hide the custom controller.
我从多个解决方案中借用了一个技巧来使事情变得简单。基本上，当我聚焦某些东西时，我希望它出现，但是如果我单击它，我希望它再次隐藏。因此，如果我单击出现的 div 内部的某些内容，我的单击将查看它是否找到了一个名为“DivHoldingcustomController”的父级。如果是这样，什么都不做。如果没有（因为我点击了其他地方，所以我点击的内容没有这个父级），然后隐藏自定义控制器。
$(document).on("click", function (event) {
var groupSelectorArea = $(event.target).closest(".DivHoldingCustomController").length == 1;
if (!groupSelectorArea)
$(".SomethingIWantToHide").hide();
});
回答by Yuseferi
You can use mouseleavemethod and solution
您可以使用mouseleave方法和解决方案
<script type="text/javascript">
$(document).ready(function()
{
$("#MainCanvas div").mouseleave(function()
{
alert("mouseleave");
});
});
</script>
回答by Matt Fellows
jQuery has .focusin()and .focusout()methods for binding to blur and focus events on elements that don't fire a native javascript blur event.
jQuery focusout
jQuery有 .focusin()，并 .focusout()用于在不火机JavaScript模糊事件元素结合模糊和焦点事件的方法。
jQuery 焦点
