检测父母是可持续div的contenteditable孩子的关键事件

问题描述

目标：将一个keydown事件处理程序附加到contenteditable div的contenteditable span上。

问题：如果您键入跨度，父事件不会触发孩子。我想要的是让孩子触发，以便我能抓住文字。我只想要这个可爱的孩子，因为会有很多。

HTML / JS在下面，小提琴链接在这里：

---

HTML

 < div class =parentcontenteditable =true> 
父文本文本。 
 
< span class =childcontenteditable =true>第一个孩子跨度文本。< / span> 
< span class =childcontenteditable =true>第二个子范围文本。< / span> 
< span class =childcontenteditable =true>第三个子范围文本。< / span> 
< / div> 
 
< div id =console>< / div> 
  

JavaScript / jQuery

  $（document）.on（'keyup'，'.parent'，function（）{
 $（'＃console'）。html（'Parent keyup event fired。'）; 
 //做东西
}）; 
 $ b $（document）.on（'keyup'，'.child'，function（）{
 $（'＃console'）。html（'Child keyup event fired。'） ; 
 //做东西
}）; 
  

**注意：事件处理委托给文档，因为元素是动态添加的。 b $ b

解决方案

所以这是一个错误。解决方法确认FF23和CHROME29（在没有vm的linux上，因此无法测试IE）。您必须将包装跨度设置为contenteditable false，您不能仅省略声明contenteditable属性，这是可笑的。通过的按键事件

这里是小提琴：

HTML

 < div class =parentcontenteditable =true> 
父文本文本。 
 
< span contenteditable =false> 
< span class =childcontenteditable =true>第一个孩子跨度文本。< / span> 
< span contenteditable =false> 
< span class =childcontenteditable =true>第二个子范围文本。< / span> 
< / span> 
< / div> 
 
< div id =console>< / div> 
  

JavaScript / jQuery

  $（document）.on（'keyup'，'.parent'，function（）{
 // do stuff 
 $（'＃console'）。html（'Parent keyup event fired。'）; 
}）; 
 $ b $（document）.on（'keyup'，'.child'，function（e）{
 // do stuff 
 $（'＃console'）。html （'Child keyup event fired。'）; 
 e.stopPropagation（）; 
}）; 
  

Goal: Attach a keydown event handler to a contenteditable span that is the child of a contenteditable div.

Problem: If you type in the span the parent event is triggered not the childs. What I want is the child to trigger so I can grab the text. I only want THAT contenteditable child as there will be many.

HTML/JS is below and the fiddle link is here: http://jsfiddle.net/aBYpt/4/

---

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span class="child" contenteditable="true">First child span text.</span>
    <span class="child" contenteditable="true">Second child span text.</span>
    <span class="child" contenteditable="true">Third child span text.</span>
</div>

<div id="console"></div>

JavaScript/jQuery

$(document).on( 'keyup', '.parent', function() {
    $('#console').html( 'Parent keyup event fired.' );
    //do stuff
});

$(document).on( 'keyup', '.child', function() {
    $('#console').html( 'Child keyup event fired.' );
    //do stuff
});

**Note: Event handling is delegated to document because elements are dynamically added.

解决方案

So this is a bug. Workaround confirmed for FF23 and CHROME29 (on linux with no vm so can't test IE). You must set the wrapping spans as contenteditable false, you can't just omit declaring the contenteditable attribute, which is rediculous. Solution via Keypress event on nested content editable (jQuery)

Here is the fiddle: http://jsfiddle.net/aBYpt/14/

HTML

<div class="parent" contenteditable="true">
    Parent div text.

    <span contenteditable="false">
        <span class="child" contenteditable="true">First child span text.</span>
    <span contenteditable="false">
        <span class="child" contenteditable="true">Second child span text.</span>
    </span>
</div>

<div id="console"></div>

JavaScript/jQuery

$(document).on( 'keyup', '.parent', function() {
    //do stuff
    $('#console').html( 'Parent keyup event fired.' );
});

$(document).on( 'keyup', '.child', function(e) {
    //do stuff
    $('#console').html( 'Child keyup event fired.' );
    e.stopPropagation();
});

这篇关于检测父母是可持续div的contenteditable孩子的关键事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！