可编辑元素的子元素事件

Question

I have

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

但似乎它不起作用。

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

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

- marcopolo

---

发布一个演示。你的代码应该能够正常运行。 - Blender

Answer 1

这几乎是不可能的。由于元素不持有输入，因此也没有真正的焦点，因此您实际上无法确定事件目标。无论如何，事件目标始终将是具有属性“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，我找不到关于该事件的太多信息，如果有人有好的资源，请在评论中分享。

- iConnor

---

但是子元素是动态添加的。 - marcopolo

@Nonconformist 那你为什么不在问题中说出来呢？ - tckmn

@Doorknob 这个问题提到了 contenteditable。那似乎是动态内容的一个不错建议。 - Jonathan Lonowski

变异事件（如DOMCharacterDataModified）已被弃用，Mutation Observers是更好的选择。https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Mutation_events - Raine Revere

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>
...

- Jonathan Lonowski

---

这似乎是正确的。OP的选择器没问题（使用click而不是keypress可以工作），问题在于键盘事件只能在contenteditable元素的顶层处理。 - georg

是的，就像我在回答中解释的那样，之所以始终是“test”元素，是因为它是唯一具有任何焦点的元素。 - iConnor

Answer 3

按键事件会冒泡到容器元素，因此您不一定需要绑定到子元素上。相反，只需绑定到容器上，然后通过访问event.target属性来检查哪个元素被编辑。

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

- Ajnasz