extjs 如何检测Container何时失去焦点

klsxnrf1  于 2022-11-05  发布在  其他
关注(0)|答案(3)|浏览(141)

我有一个容器(在一个表单中),它有一个表布局,其中有一组编辑字段(文本、复选框等)。
我需要捕获用户在容器外部(例如,在菜单项上)单击的时间。当前容器上没有事件处理程序。

w1e3prcc

w1e3prcc1#

我知道这是一个老问题,但我最近遇到了同样的问题,所以我想我会尝试帮助任何同胞患者。
我花了几个小时创建blur和click事件监听器的各种化身,这些监听器看起来几乎都能正常工作。Blur会失败,因为即使焦点在子元素上,它也会触发。Click可以工作,但不能处理键盘导航。
我的最后一个解决方案是在窗口级别捕获焦点事件,并将焦点目标与我的容器及其子容器进行比较。这只适用于支持 addEventListener 的浏览器。在我的应用中,我有一个受控的受众,不需要担心IE〈9。
首先创建一个函数来检查焦点目标是容器还是它的任何子元素。

var LocalTarget = function( el, target )
{
    if ( el === target )
    {
        return true;
    }
    else if ( el.childNodes )
    {
        var els = el.childNodes;

        for ( var i = 0, n = els.length; i < n; i++ )
        {
            if ( els[i] === target )
            {
                return true;
            }
            else if ( els[i].childNodes )
            {
                if ( LocalTarget(els[i], target) ) return true;
            }
        }
    }

    return false;
};

请注意,这将通过递归比较容器中的所有节点。
接下来,创建一个侦听器函数。

var Listener = function( e )
{
    // Check if receiving element is part of the container.
    if ( !LocalTarget([YOUR CONTAINER], e.target) )
    {
        // Do focus lost stuff here...

        // Remove the event listener. [OPTIONAL]
        window.removeEventListener( 'focus', Listener, window, true );
    }
};

请注意,LocalTarget和Listener函数以及[YOUR CONTAINER]都是闭包。
最后,添加事件侦听器。

window.addEventListener( 'focus', Listener, window, true );

虽然看起来有很多工作要做,开销也很大,但这是我唯一能做的混合物。希望它能帮助到别人。

eaf3rand

eaf3rand2#

下面是一个使用focusout事件、Node.contains方法和relatedTarget属性的解决方案。它侦听包含元素上的focusout事件。当相关目标不再是该包含元素的后代时,您就知道焦点已经离开了该元素。

let element = document.querySelector('.some-selector');
element.addEventListener('focusout', e => {
  if (! element.contains(e.relatedTarget)) {
    // Focus has left the element
  }
});

由于IE11 has only partial support for the Node.contains method,这在IE11中可能不起作用。

vdzxcuhz

vdzxcuhz3#

在jquery中可以使用$('#container').blur(function() { //some code here });

相关问题