Javascript jQuery keydown回调仅在外部侦听<；ul>；而不是内在的<；李>；要素_Javascript_Jquery_Html_Contenteditable

Javascript jQuery keydown回调仅在外部侦听<；ul>；而不是内在的<；李>；要素

javascript jquery html

Javascript jQuery keydown回调仅在外部侦听<；ul>；而不是内在的<；李>；要素,javascript,jquery,html,contenteditable,Javascript,Jquery,Html,Contenteditable,嘿，这是我做的代码演示 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> </head> <body> <ul contenteditable class="outerList"> <li class="innerElement">Hell

嘿，这是我做的代码演示

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<ul contenteditable class="outerList">
<li class="innerElement">Hello</li>
<li class="innerElement">World</li>
<li class="innerElement">Hello World</li>
</ul>
<script>
    $(".outerList").keydown(function () {
      console.log("I am the outer ul");
    });
    $(".innerElement").keydown(function() {
      console.log("I am an inner element");
    });
    </script>
</body>
</html>



您好
世界
你好，世界

$（“.outerList”）.keydown（函数（）{
log（“我是外部ul”）；
});
$（“.innerElement”）.keydown（函数（）{
log（“我是一个内部元素”）；
});

下面是运行它的JSFIDLE

基本上，我有一个内容可编辑的UL，我想捕捉回车键并传入我自己的自定义函数。但是我需要知道keydown事件是在哪个LI元素上抛出的。如演示所示，我似乎只能将keydown事件监听器（或任何事件监听器）绑定到外部UL元素。是否有方法将按键事件附加到每个LI？或者至少有一种方法可以将它附加到UL上，但仍然可以分辨出它来自哪个孩子

提前谢谢，如果有任何其他信息会有所帮助，请告诉我

您必须将

contenteditable

添加到

li

元素中才能实现这一点。您正在将

contenteditable

设置为

ul

元素，因此，事件将绑定到该元素，您可以编辑

li

元素，但它们没有设置

contenteditable

，因此不会为这些元素触发键盘事件

<ul class="outerList">
    <li contenteditable class="innerElement">Hello</li>
    <li contenteditable class="innerElement">World</li>
    <li contenteditable class="innerElement">Hello World</li>
</ul>

您可以在当前选择中检查节点如果不想使每个

li

元素成为

contenteditable

元素，可以在当前选择或插入符号位置获取元素，并对其执行检查

嵌入式示例显示了如何使用实现这一点。（我在Chrome上测试过，但可能需要额外的逻辑来实现跨浏览器兼容性）

还值得注意的是，您可以将一些事件侦听器绑定到

contenteditable

元素的子元素。例如，

click

事件可能会绑定到

li

元素，如嵌入示例中所示

$（文档）.ready（函数（）{
函数getCurrentNode（）{
var node=window.getSelection（）.getRangeAt（0）.commonAncestorContainer；
返回node.nodeType==1？节点：node.parentNode；
}
$（'.outerList'）。在（'click keyup'，函数（e）上{
var$target=$（getCurrentNode（）），
$closest=$target.closest（'b'）；
console.log（e.type）；
log（“我是外部ul”）；
console.log（$target）；
//可选。按clostest选择器筛选。
如果（$closest.length）{
log（'Target matches selector'，$closest）；
}
});
$（'.innerElement'）。在（'click'，函数（e）上{
console.log（e.type）；
log（“我是一个内部元素”）；
});
});


您好
您好
您好
您好
您好
您好
所以我之前没有这样做的原因是因为我想让enter键添加一个新行。但是我想我只需要重写enter来手动添加行？按下enter键后，如何将光标下移到新行？不管怎样，既然你是对的，而且我很确定这是唯一的方法，我会标记为接受。谢谢@塔克斯卡拉-你有更好的解释。：）没问题！很乐意帮忙：）。如果您想添加一个新行，只需克隆它或使用jQuery创建它，我想在触发新添加的行上的焦点事件后，li应该执行将光标移动到该行的技巧：）
$(".innerElement").keydown(function() {
  console.log("I am an inner element");
});