Javascript 使用显示块获取父元素

我有这个html

<div id="editor" contenteditable="true">
This text is directly under div
<p>Some text under p tag. <span> Some under span tag</span>  and this is another text</p>
<p>Another para</p>
</div>
<button>Get block level parent</button>

JSFIDLE在这里：

现在，当我将光标放在文本“另一个段落”内或双击“另一个段落”（在mac中选择整个段落）并单击按钮“获取块级父对象”时，我将在警报中获取HTMLParagraphElement

但是，当我将光标放在第一个段落（“p标记下的一些文本”）中并单击按钮时，我会在警报中看到“HTMLParagraphElement”。当我双击第二个段落，选择整个第一个段落，然后点击按钮，我得到“HtmlLevel”

我希望我的代码能像第二段那样工作。i、 例如，双击句子并单击按钮，它应该显示“HTMLParagraphElement”。我该怎么做

---

非常感谢您的帮助

问题在于，您要从父节点开始循环。选择整个段落时，它的父级是

DIV

。因此，从当前元素而不是父元素开始循环

function getParentBlock() {
    var element = document.getSelection().focusNode;
    for (var p = element; p; p = p.parentNode) {
        var style = window.getComputedStyle(p, null);
        if (style) {
            var displaystyle = style.getPropertyValue('display');
            if (displaystyle == 'block') {
                return p;
            }
        }
    }
}

---

在调用getPropertyValue之前，必须测试

getComputedStyle

的结果，因为文本节点没有样式，它返回

null

谢谢@barmar。你的代码运行得很好。但是，这可能与您的代码无关，但仍然是一个bug。当我双击第一段并单击按钮时，它会显示第二段的内容，这很奇怪。你能帮我调试一下吗？将focusNode更改为anchorNode可以解决这个问题。然而，我仍然感到困惑的是，为什么focusNode会出现错误，也就是说，双击所做的选择仍然显示第一段，但为什么focusNode指向第二段？

focusNode

是选择的终点。我猜当你选择一整段时，它会在下一段的开头结束。

function getParentBlock() {
    var element = document.getSelection().focusNode;
    for (var p = element; p; p = p.parentNode) {
        var style = window.getComputedStyle(p, null);
        if (style) {
            var displaystyle = style.getPropertyValue('display');
            if (displaystyle == 'block') {
                return p;
            }
        }
    }
}