给定这段HTML代码:
<div contenteditable>
....
<span> child-element </span>
....
</div>
当用户点击SPAN元素(以使插入符在其中),然后按下键盘上的字符键(以编辑SPAN元素的文本内容)时,将触发一系列事件,包括 keydown
、keypress
和keyup
。
然而,这些相应事件对象的target
属性不是SPAN元素,而是DIV元素本身。
演示:(同时也可以在 jsFiddle上查看)
$('div').keydown(function(e) {
alert( e.target.nodeName );
});
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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
我该如何确定按键事件是否发生在 SPAN 元素内部?
anchorNode
不能保证是一个文本节点。最好检查它的节点类型,看看它是否是一个元素,以确保安全。 - Tim Down