javascript - 在 IE 中为浮动和内联块元素触发 focusin 事件

Question

作为表单输入和链接标签一部分的focusin事件正在应用于div和span标签。它发生在浮动和内联块元素上。该问题在 IE（8 和 9）中被发现。

演示 ==> http://jsfiddle.net/Agczq/

有没有办法阻止这种情况？

谢谢

Answer 1

不像你可能期望focusin的focusout那样冒泡，不像常规的那样focus事件。处理此问题的两种主要方法是：事件委托，或简单地阻止事件冒泡。

你的小提琴很难理解（即：不知道你在做什么）。想到的第一件事（在将您的 JS 代码移动到 jsfiddle 上的 JavaScript 字段之后）是您focus在良好的浏览器中捕获事件，并且focusin在糟糕的 IE 中冒泡。
这可能很烦人，特别是因为 IE 不支持实际事件捕获。不过，这是一个（简单但经过测试且有效）的建议：

function mycb(evt)
{
    evt = evt || window.event;//get event object
    var from = evt.target || evt.srcElement;//get source
    if (evt.stopPropagation)//stop event from bubbling
    {
        evt.stopPropagation();//shouldn't be necessary, but you never know
    }
    else
    {
        evt.cancelBubble = true;//stop propagation in IE-lingo
    }
    if (from.tagName === 'DIV' || from.tagName === 'SPAN')
    {//if source was a tag that souldn't fire event, return false;
        if (evt.preventDefault)
        {
            evt.preventDefault();
            return false;
        }
        evt.returnValue = false;
        return false;
    }
     alert("fired!!!");
}

var elem = document.getElementById("mybox");
if( elem.attachEvent )
{
    elem.attachEvent("onfocusin",  mycb);
}
else
{
    elem.addEventListener("focus", mycb, true);
}

这段代码在 IE8 中测试过，fiddle 可以在这里找到。
碰巧我今天读到了这个事件，在这里。我认为，值得一提的来源。

希望这可以帮助