Question

我有

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

但它似乎不起作用。

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

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

Answer 1

contenteditable 几乎不可能看到元素不像事件那样保存输入，因此没有真正的焦点，所以你实际上无法确定 { {1}} 即可。 event.target 将始终是具有该属性的容器   event.target。

但是，您可以使用 contenteditable="true" 事件，例如＆amp;演示如下。

DOMCharacterDataModified

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

参考1： $('#test').on('DOMCharacterDataModified', function( event ) { if($(event.target).parent().attr('id') === 'test') { // Reference 1 alert('modified'); } }); 语句检查 if 是否是{的直接子项{1}}容器。

event.target 的浏览器支持也不错。的＆LT; 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) });

关于孩子的事件的满足感

3 个答案: