如何在blur或focusout事件里得到即将得到焦点的元素？另外这两个事件有什么区别？_html/css_WEB-ITnose

本帖最后由 Javkburd 于 2013-05-11 23:21:32 编辑

    我实现了一个类似搜索栏的功能，就是在输入框里输入，然后显示类似下拉列表来匹配已输入字符串（其实就是动态生成一个一列的table），其它的一些细节都处理好了，而且对于IE，Chrome，Safari和Firefox都做到了兼容。但是就是想在输入框失去焦点时让table消失，但是问题是”点击table本身时输入框也会失去焦点，但是此时点击是为了让table某一行匹配项显示到输入框内然后再消失，而不是立即消失”。此时在focusout里捕获的得到焦点的元素是body而不是table，应该是事件冒泡到body了。但是此时table还没有得到焦点而只是即将得到焦点，要是能得到实际得到焦点的元素，就能够判断“如果是table，那么点击某行后显示匹配内容到输入框内然后再消失，如果不是table就直接消失”。一种笨方法是在其它所有非table元素的focus事件内让table消失，但是这样太麻烦了。最后我想知道focusout和blur的区别。页面运行效果如下图所示（没有显示页面其它元素）：

回复讨论(解决方案)

笨办法是

输入框 失去焦点后
settimeout 一段时间后 弹出的列表框 消失  这样可以给你点一下的机会

setTimeout延时隐藏table，再写table的mouseenter事件，清除定时器，mouseleave事件隐藏table

var timer;
$(input).blur(function(){
    timer = setTimeout(function(){
        $(table).hide();
    },200);
});
$(table).mouseenter(function(){
    if(timer) clearTimeout(timer);
});
$(table).mouseleave(function(){
    $(table).hide();
});
能看明白？

setTimeout延时隐藏table，再写table的mouseenter事件，清除定时器，mouseleave事件隐藏table

var timer;
$(input).blur(function(){
    timer = setTimeout(function(){
        $(table).hide();
    },200);
});
$(table).mouseenter(function(){
    if(timer) clearTimeout(timer);
});
$(table).mouseleave(function(){
    $(table).hide();
});
能看明白？
你这话说的，有什么不明白的？ 问题已经解决。我还想问的是blur和focusout有哪些区别，网上找不到好的资源。

setTimeout延时隐藏table，再写table的mouseenter事件，清除定时器，mouseleave事件隐藏table

var timer;
$(input).blur(function(){
    timer = setTimeout(function(){
        $(table).hide();
    },200);
});
$(table).mouseenter(function(){
    if(timer) clearTimeout(timer);
});
$(table).mouseleave(function(){
    $(table).hide();
});
能看明白？
只是有一点我不懂，就是我在table的td内添加函数

td.onclick = function ()        {            if(timer)  clearTimeout(timer);            source.value = this.innerHTML;  //注意TextBox的innerHTML为空，因为text位于元素内部            $("#" + tableId).remove();        }

虽然也在TextBox的blur函数内设置了延时定时器

$("#txtEmail").blur(function(event)            {                timer = setTimeout(function () { $("#tableEmail").remove() }, 200);   //异步，立即返回                //设置定时器延时让table得到焦点并处理后再消失，而且延时不能太短也不能太长            })

但是如果不在td.onclick内不写$("#" + tableId).remove()，table并不会消失，也就是并没有执行定时器内的延时函数，难道延时内只要有执行过程就会阻塞执行定时器内的延时函数导致其不执行吗？

setTimeout延时隐藏table，再写table的mouseenter事件，清除定时器，mouseleave事件隐藏table

var timer;
$(input).blur(function(){
    timer = setTimeout(function(){
        $(table).hide();
    },200);
});
$(table).mouseenter(function(){
    if(timer) clearTimeout(timer);
});
$(table).mouseleave(function(){
    $(table).hide();
});
能看明白？
只是有一点我不懂，就是我在table的td内添加函数

td.onclick = function ()        {            if(timer)  clearTimeout(timer);            source.value = this.innerHTML;  //注意TextBox的innerHTML为空，因为text位于元素内部            $("#" + tableId).remove();        }

虽然也在TextBox的blur函数内设置了延时定时器

$("#txtEmail").blur(function(event)            {                timer = setTimeout(function () { $("#tableEmail").remove() }, 200);   //异步，立即返回                //设置定时器延时让table得到焦点并处理后再消失，而且延时不能太短也不能太长            })

但是如果不在td.onclick内不写$("#" + tableId).remove()，table并不会消失，也就是并没有执行定时器内的延时函数，难道延时内只要有执行过程就会阻塞执行定时器内的延时函数导致其不执行吗？

因为先执行了input的blur事件，再执行td的onclick事件，于是在onclick的时候，先clear掉了timer，所以就不会执行setTimeout里面的函数了。

至于你问的fousout跟blur事件有什么区别，我没接触过fousout，我估计fousout事件应该会比blur多一个属性targetElement||toElement，类似mouseout，可以获取fousout后哪个对象获得焦点。

setTimeout延时隐藏table，再写table的mouseenter事件，清除定时器，mouseleave事件隐藏table

var timer;
$(input).blur(function(){
    timer = setTimeout(function(){
        $(table).hide();
    },200);
});
$(table).mouseenter(function(){
    if(timer) clearTimeout(timer);
});
$(table).mouseleave(function(){
    $(table).hide();
});
能看明白？
只是有一点我不懂，就是我在table的td内添加函数

td.onclick = function ()        {            if(timer)  clearTimeout(timer);            source.value = this.innerHTML;  //注意TextBox的innerHTML为空，因为text位于元素内部            $("#" + tableId).remove();        }

虽然也在TextBox的blur函数内设置了延时定时器

$("#txtEmail").blur(function(event)            {                timer = setTimeout(function () { $("#tableEmail").remove() }, 200);   //异步，立即返回                //设置定时器延时让table得到焦点并处理后再消失，而且延时不能太短也不能太长            })

但是如果不在td.onclick内不写$("#" + tableId).remove()，table并不会消失，也就是并没有执行定时器内的延时函数，难道延时内只要有执行过程就会阻塞执行定时器内的延时函数导致其不执行吗？

因为先执行了input的blur事件，再执行td的onclick事件，于是在onclick的时候，先clear掉了timer，所以就不会执行setTimeout里面的函数了。

至于你问的fousout跟blur事件有什么区别，我没接触过fousout，我估计fousout事件应该会比blur多一个属性targetElement||toElement，类似mouseout，可以获取fousout后哪个对象获得焦点。
我所知道的有srcElement，fromElement，toElement，target和relatedTarget，但是好像都不能得到即将得到焦点的元素，不知道他们有什么特殊含义。

srcElement|| target 当前目标元素
fromElement || relatedTarget  从何元素进入当前元素
toElement || relatedTarget   从当前元素进入到何元素

简单点说就是：
我是谁
我从何而来
我去往何方

srcElement|| target 当前目标元素
fromElement || relatedTarget  从何元素进入当前元素
toElement || relatedTarget   从当前元素进入到何元素

简单点说就是：
我是谁
我从何而来
我去往何方
srcElement和target属性在blur或focusout中可用，其它三个不行；但是在onmouseover和onmouseout中所有属性都可用。所以确实不能在此获得即将得到焦点的元素了，只能采用延时了。