javascript - javascript检测父元素为 contenteditable div的contenteditable子元素的keyup事件

  显示原文与译文双语对照的内容
51 4

向 contenteditable span 附加keydown事件处理程序:将keydown事件处理程序附加到 contenteditable div的子项。

问题:如果你在中键入,父事件就不会触发子事件。 我想要的是触发的孩子,这样我才能抓住文字。 我只希望这个contenteditable的孩子会有很多。

html/js是 below,而fiddle链接在这里: 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: 事件处理委托给文档,因为元素是动态添加的。

时间: 原作者:

103 2

这是一个 Bug 。 为FF23和 CHROME29 ( 在没有虚拟机的linux上无法测试 IE ) 确定的解决方案。 必须将包装范围设置为 contenteditable,不能仅仅省略将contenteditable属性声明为 rediculous,的。 通过 Keypress事件解决嵌套内容可以编辑( jQuery )

这里有小提琴: 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();


});



原作者:
...