我希望根据节点是否可以编辑内容来执行工作。通过onkeyup
捕获节点event.target
。考虑这个复杂的可满足节点结构:
<div contenteditable="true">
<div contenteditable="true">
<ol>
<li>
<a href="google.com">
<span style="color: red;">Hi!</span>
</a>
</li>
</ol>
"A text node"
<p>Some more text</p>
</div>
</div>
我希望keyup
节点内的span
以及文本节点将它们检测为可信节点并执行工作。
所以,我写了这个函数(很长但很简单):
// callForParent: flag to prevent infinite recursion
window.isContentEditable = function(node, callForParent){
var tgN = node && node.tagName,
attr, parentCount, parent, MAX_PARENTS_CHECKED = INTEGER_VALUE (3,4,5,etc.);
// insanity checks first
if(!node || tgN === "TEXTAREA" || tgN === "INPUT" || !node.getAttribute)
return false;
else{
attr = node.attr("contenteditable");
// empty string to support <element contenteditable> markup
if(attr === "" || attr === "true" || attr === "plaintext-only")
return true;
// avoid infinite recursion
if(callForParent) return false;
parentCount = 1;
parent = node;
do{
parent = parent.parentNode;
parentCount++;
if(!parent) return false;
// parent check call
if(isContentEditable(parent, true)) return true;
}while(parentCount <= MAX_PARENTS_CHECKED);
return false;
}
};
请注意上面的计数器限制MAX_PARENTS_CHECKED
。这样可以确保我在DOM树中找到多少级别来搜索父级可信节点。
该计数器会影响我程序的逻辑正确性吗?我的意思是,就像我在上面显示的HTML结构中一样,我们需要限制4
来涵盖所有情况。可能需要更多。
但是我担心将限制增加到某个点以上可能会使检测到的非满足节点被检测为具有可信度。这种对我的恐惧是真的/可能吗? 是否有示例表明可信节点的深层后代可以是非CE节点?
我不想在深层非CE节点中执行操作,例如,用户不能编辑它,然后我的应用程序出错。
对不起,如果我听起来很挑剔,但我需要确认
UPDATE:正如评论中的user3297291所确认的那样,存在CE节点的非CE子节点上的keyup
被检测为event.target
==的情况对于父母而不是孩子,与人们的期望相反。这些情况是我的应用可能会触发,并期望插入符Range
,Selection
等执行某些工作,并且会出现错误。
是否存在一些修复/正确的方法?