JavaScript:onkeyup() 的原始目标

Question

我有一个包含许多动态插入范围的 contentEditable 字段。

当我使用 onclick() 事件中的 getTarget() 时，我将目标作为相应的跨度，但使用 onkeyup() 和 onkeydown() 时，它将目标作为调用函数的 div (我正在使用冒泡来捕获事件(如果我是正确的话))

function getTarget(e)
{
    var targ;
    if (!e)
       var e = window.event;
    if (e.target)
       targ = e.target;
    else if (e.srcElement)
       targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
       targ = targ.parentNode;
    return targ;
}

有人能指出为什么会这样吗？谢谢你

注意:事实上，我只是注意到 span 不接受 onkeydown、onkeyup 或 onkeypress。只有 onclick 事件被触发。如何让 span 接受按键事件？

<div class="myedit" onclick="setcontext(event);" 
                onkeydown="getCursorPos();checkmarkup(this,event);"
                    contentEditable="true" >

                    <span class="context global" >global <br/>

                    <span class="context function" >
                     fun1 hi bye   
                     </span>

                     <div>
                        <span class="context function">
                        fun2
                        </span>
                     </div>

                 </span>
</div>

这是 HTML 部分。请注意，我可以通过单击或将光标移动到它们来编辑文本“global”或“fun1 hi bye”或“fun2”。如果我错了请纠正我，但据我了解 span 能够接收关键事件(因为它能够更改其内容)所以它应该引发关键事件。此外，即使我在每个 span 上添加 contenteditable='true' 和 onkeydown="alert('keytest')" 它仍然没有'不引发事件。

如果无法在 span 上捕获关键事件，那么我可以使用任何其他元素来捕获关键事件但不会更改结构吗？

Answer 1

只有满足以下两个条件时，您才会收到元素上的键事件:

1. 元素可以接收焦点。 (对于非输入元素，这意味着 contenteditable="true" 或该元素具有 tabindex 属性)。

2. 元素有焦点。

听起来您已经在使用可编辑元素了。但是，请注意，如果您在 contenteditable 元素中有一个不可编辑的跨度，您仍然只会收到父元素的事件。 您还必须使 span 可编辑，并为其分配焦点。 编辑:您实际上不能在另一个 contenteditable 元素中包含一个 contenteditable 元素。外部元素始终获得焦点，即使您在内部元素上手动调用 .focus()。