我如何知道删除键按下的确切段落？

Question

假设我们有一个如下所示的 html。

<div class="my_content" contenteditable="true">
    <div class="my_paragraph"><span style="color:red;">RED</span><span style="color:green;">GREEN</span></div>
    <div class="my_paragraph"><span style="font-size:1em">1EM-TEXT</span><div>
    <div class="my_paragraph"><span style="font-size:2em">2EM-TEXT</span><div>
</div>

我有一个 Backbone 查看器，如下所示。

 events: {
    "keydown .my_paragraph" :"onKeyDown"
 },

 onKeyDown : function(e) {
     if(e.keyCode === 46) { //delete key
     }
 }

问。在 onKeyDown 方法的 'if' 中，如何获取用户尝试删除的确切段落（通过按删除键）？

Answer 1

onKeyDown : function(e) {
     if(e.keyCode === 46) { //delete key
     }
 }

您希望在您的示例中传递一个事件，即参数 e 您可以使用 e.target object

确定重点段落

更新：

正如 derek 所说，divs 无法监听按键事件，除非您将 content editable 设置为 true。

为此，删除父 div 的 contenteditable 并在每个子

中设置此属性

$(function(){
  $('.my_paragraph').on('keydown', function(e){
       console.log(e.target);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="my_content">
    <div class="my_paragraph first" contenteditable="true"><span style="color:red;">RED</span>"><span style="color:green;">GREEN</span></div>
    <div class="my_paragraph second" contenteditable="true"><span style="font-size:1em">1EM-TEXT</span></div>
    <div class="my_paragraph third" contenteditable="true"><span style="font-size:2em">2EM-TEXT</span></div>
</div>

Answer 2

你可以按照以下方式做一些事情：

var cursorTarget = getSelection().getRangeAt(0).commonAncestorContainer.parentNode;
var targetParagraph = $('.my_paragraph').has(cursorTarget);
targetParagraph.addClass('target-paragraph'); // Or whatever you want

Codepen Example（例如使用空格键）

同样重要的是：你的无效html。您没有在最后两个 .my_paragraph div 中正确使用关闭 </div> 标签，并且在关闭第一个 span.

之后还有一个额外的 ">

我如何知道删除键按下的确切段落？

How Can I know the exact paragraph where delete key was down?

html

javascript

jquery

backbone.js