javascript - contenteditable 元素的子元素上的事件

Question

我有

myDiv.bind('keypress', '> *', function(event) { console.log('keypress') });

但它似乎不起作用。

myDiv 是 contenteditable，我正在尝试访问正在编辑的 p 元素。

http://jsfiddle.net/nb5UA/5/（尝试在点击回车后创建的 div 中输入）

Answer 1

这几乎是不可能的，contenteditable因为元素不会像事件一样保存输入，因此没有真正的焦点，因此您实际上无法确定event.target. 将event.target始终是具有属性的容器 contenteditable="true"。

但是，您可以DOMCharacterDataModified像下面的示例和演示一样使用该事件。

$('#test').on('DOMCharacterDataModified',  function( event ) {
    if($(event.target).parent().attr('id') === 'test') { // Reference 1 
        alert('modified');
    }
});

演示：http: //jsfiddle.net/nb5UA/15/

参考 1：该if语句正在检查是容器event.target的直接子级。#test

浏览器支持DOMCharacterDataModified还不错。< 不支持 IE9，我找不到有关该事件的太多信息，所以如果有人有好的资源，请在评论中分享。

Answer 2

问题可能不是选择器，而是<div id="test">始终是event.target.

$('#test').on('keypress', function (e) {
    console.log(e.target);
});

有了这个，至少在 Chrome 中，控制台只记录：

<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
<div id="test" contenteditable="true" style="width:500px; overflow: scroll; height: 500px; border: 1px solid #000;">...</div>
...

Answer 3

Keypress 事件将冒泡到容器元素，因此您不一定需要绑定到子元素。而是只绑定到容器，而不是通过访问 event.target 属性来检查哪个元素被编辑。

$('#container').on('keypress', function (event) { alert(event.target) });