嘿所以这是我制作的代码演示
<!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>
这是运行它的jsFiddle
基本上我有一个内容可编辑的UL,我想要捕获回车键并传入我自己的自定义功能。但是我需要知道keydown事件被抛出的LI元素。并且如演示中所示,我似乎只能将keydown事件侦听器(或任何事件侦听器)绑定到外部UL元素。有没有办法将keydown事件附加到每个LI?或者至少有一种方法可以将它附加到UL,但仍然告诉它来自哪个孩子?
在此先感谢,如果有任何其他信息有帮助,请与我们联系!
答案 0 :(得分:2)
您必须将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>
然后:
$(".innerElement").keydown(function() {
console.log("I am an inner element");
});
答案 1 :(得分:2)
如果您不想让每个li
成为contenteditable
元素,您可以将元素放在当前选择或插入位置并对其进行检查。
嵌入式示例显示了如何使用Web API Interface for contenteditable
selections实现此目的。 (我在Chrome中对此进行了测试,但可能需要其他逻辑才能实现跨浏览器兼容性。)
值得注意的是,可以将某些事件侦听器绑定到contenteditable
元素的子元素。例如,click
事件可能绑定到li
元素,如嵌入式示例中所示。
$(document).ready(function() {
function getCurrentNode() {
var node = window.getSelection().getRangeAt(0).commonAncestorContainer;
return node.nodeType === 1 ? node : node.parentNode;
}
$('.outerList').on('click keyup', function (e) {
var $target = $(getCurrentNode()),
$closest = $target.closest('b');
console.log(e.type);
console.log('I am the outer ul');
console.log($target);
// Optional. Filter by clostest selector.
if ($closest.length) {
console.log('Target matches selector', $closest);
}
});
$('.innerElement').on('click', function (e) {
console.log(e.type);
console.log('I am an inner element');
});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul contenteditable class="outerList">
<li class="innerElement">Hello</li>
<li class="innerElement"><i>Hello</i></li>
<li class="innerElement"><b><i>Hello</i></b></li>
<li class="innerElement"><b>Hello</b></li>
<li class="innerElement">Hello</li>
<li class="innerElement">Hello</li>
</ul>
&#13;