标签：html javascript event-handling

我已经定义了以下两个span元素：
1)一个可信的div内的元素.
2)满足要素.

到目前为止,我无法为我的第一个案例()开启onkey事件.
对于不在可信任的div中的第二个(),这些事件很好.

有人知道为什么吗？

这是示例代码：

<div id='editor' contenteditable>
div contents...
<span id='span1' style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>
</div>

<span contenteditable id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>

http://jsfiddle.net/nr9HG/

解决方法:

因为span1不是一个满足,所以它不会触发任何事件.

您也可以在子项上设置contenteditable,但它不会被触发,因为包装contenteditable div编辑器在内部跨度之前捕获事件,因此它们不会在子span1上触发.

所以你可以改变你的代码：

<div id='editor' contenteditable="false">div contents...
<span id='span1' contenteditable="true" style="background-color:red"  onkeyup='alert("span1 keyup");' onkeypress='alert("span1 keypress");' onkeydown='alert("span1 keydown");'>Hello</span>

</div>
<span contenteditable="true" id='span2' style="background-color:yellow" onkeyup='alert("span2 keyup");' onkeypress='alert("span2 keypress");' onkeydown='alert("span2 keydown");'>World</span>

演示：http://jsfiddle.net/IrvinDominin/U8wnK/

旁注：我认为最好在标记中显示contenteditable的布尔值

标签：html,javascript,event-handling
来源： https://codeday.me/bug/20191002/1845447.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。