DOM树的深度是多余的,保留了可靠性?

时间:2017-03-13 09:26:50

标签: dom contenteditable

背景

我希望根据节点是否可以编辑内容来执行工作。通过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 ==的情况对于父母而不是孩子,与人们的期望相反。这些情况是我的应用可能会触发,并期望插入符RangeSelection等执行某些工作,并且会出现错误。

  

是否存在一些修复/正确的方法?

0 个答案:

没有答案