Question

鉴于此HTML代码：

<div contenteditable>
    ....
    <span> child-element </span>
    ....
</div>

当用户点击SPAN元素（为了将插入符号放在其中），然后按下键盘上的字符键（为了编辑SPAN元素的文本内容），{{1 <}，keydown和keypress事件将被触发。

但是，这些相应事件对象的keyup属性是不是 SPAN元素，而是DIV元素本身。

现场演示（另外on jsFiddle）

target

$('div').keydown(function(e) {
    alert( e.target.nodeName );
});

div { border:2px solid red; padding:10px; margin:10px; }
span { background-color:yellow; }

如何确定键事件是否发生在SPAN元素内？

Answer 1

这可以使用选择API完成：

$('div').keydown(function(e) {
    if (document.selection) {
        alert(document.selection.createRange().parentElement().tagName); // IE
    } else {
        // everyone else
        alert(window.getSelection().anchorNode.parentNode.tagName); 
    }
});

注意：以上示例过于简单。请参阅下面链接的SO帖子，以获得选择问题的完整解决方案。

演示（也是on jsFiddle）：

$('div').keydown(function(e) {
    if (document.selection)
        alert(document.selection.createRange().parentElement().tagName); // IE
    else
        alert(window.getSelection().anchorNode.parentNode.tagName); // everyone else
});

div { border:2px solid red; padding:10px; margin:10px; }
span { background-color:yellow; }

<div contenteditable>
    BEFORE
    <span>SPAN</span>
    AFTER
</div>

<p>
    Click on the yellow SPAN element (to place the caret inside it), and then press a character key (to change the text-content of the SPAN element). The alert-box shows that the event-target is the DIV element, not the SPAN element...
</p>
<div id="stuff"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

参考文献：

Answer 2

使整个div可编辑意味着<span>标记只是文本内容。如果您只想让span可编辑，请在范围内设置contentEditable。

如何检测何时通过键盘编辑了一个可信的DIV的子元素？

2 个答案: