Javascript 嵌套内容上的按键事件可编辑（jQuery）

我有一个CONTENTEDITABLE div，在该div中我有一个CONTENTEDITABLE span，我想做的是能够处理内部span上的onkeypress事件

因此，javascript代码应该是：

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

HTML内容将是：

$(function()
{
    $('#someid').keypress(function(event){alert('test');});
});

<div id="mydiv" contenteditable="true">
editable follows:<span id="someid" contenteditable="true">Some TEXT</span>
</div>

可编辑如下：一些文本

---

如果您在浏览器上测试它，您将看到当您在某些文本上按某个键时，您将看不到“测试”对话框，我知道问题在于事件在父div中被触发，因此SPAN无法获取事件，也因为它没有焦点。因此，我希望您能帮助我找到解决方案。

您最好将keypress事件绑定到#mydiv元素，如下所示：

$('#mydiv').delegate("span", "keypress", function(){
    console.alert('A key has been pressed: ' + this.id);
});

---

不过，在进一步的调查中，似乎规则跨度和div之类的DOM元素无法接收焦点。不过，您可以通过在每个span中添加一个tabindex属性来解决这个问题。

您在问题中发布的确切代码在当前看来效果不错

测试并使用FF、Opera、Chrome、Safari、IE8

唯一的变化是删除注释，该注释以其当前形式创建语法错误

#someid

需要对焦才能使按键正常工作。
如果希望代码在创建元素后立即将焦点赋予该元素，请使用

.focus（）

方法

function AppendSpan()
{
    $('#mydiv').append('<span id="someid" contenteditable="true">Some TExt</span>');
    //Then I want to handle the keypress event on the inserted span
    $('#someid').keypress(function(event){
          //do something here
          alert(this.id);
    }).focus();// bring focus to the element once you append it..
}

函数AppendSpan（）
{
$（'#mydiv'）.append（'sometext'）；
//然后我想处理插入跨距上的按键事件
$（'#someid'）。按键（函数（事件）{
//在这里做点什么
警报（this.id）；
}).focus（）；//添加元素后，将其作为焦点。。
}

---

更新

有两种处理方法（即存在嵌套的

contenteditable

元素），不确定是否有适合您的情况的方法，但这里有

将新的

contenteditable

span包装到另一个

contenteditable=“false”

（演示：）

添加span后，将

#mydiv

设置为不可编辑

content

。
（演示：）

---

你能在上面创建一个例子来说明这个问题吗？AFAIK键盘不会在文档中冒泡（对于非输入元素）。你可以检测一个正常的按键，然后检查

#someid

是否有焦点。这似乎是可行的：好的，我意识到我给出的示例是错误的，我更新了示例，你可以检查它不起作用，当按下#mydiv上的任何键时，它会附加span，但插入的span上不会触发keypress事件。好的，我意识到我给出的示例是错误的，我更新了示例，您可以检查它是否工作，当在#mydiv上按下任何键时，它会附加跨度，但插入的跨度上不会触发keypress事件。@coder更新了答案以适应问题的新要求。。（最好编辑原始问题，添加

#mydiv

也是

contenteditable

，因此我们讨论的是嵌套contenteditables）好的，这不是理想的解决方案，但我可以解决，谢谢。浪费了这么多时间。。。通过在true中嵌套false->true来验证该技巧，可以正确侦听contentEditable设置为true的嵌套元素上的事件谢谢：）+1：按照您的建议，这是有效的：$（“#mydiv span”）。单击（function（）{$（this）.attr（“tabindex”，0.focus（）；}）；然后，事件被正确地传递。谢谢不幸的是，“tabindex”黑客似乎只在Webkit中起作用。另一个问题是，它需要单击，例如，如果按“右”或“左”键，焦点将再次转到其可编辑的父对象。。。