更正元素.closest()DOM方法的选择器规范

Question

我正试图从以下HTML中最内部的按钮元素获取外部div的id：

    <div id="menu_level_0" class="menu_level">
        <div class="editor">
            <div class="ui_details">
                <div class="dialog_buttons">
                    <button class="ui_btn" type="button">OK</button>
                </div>
            </div>
        </div>
    </div>

将e.target从按钮的事件处理程序回调fn转储到控制台将返回正确的按钮元素。

但是为什么呼叫

e.target.closest(".menu_level");

从同一个回调给我null？

Answer 1

尝试console.log您的e.target。这可能是另一个元素，而不是你的按钮。

// proof that, button.closest() works:
console.log(document.querySelector("button").closest('.menu_level'))

<div id="menu_level_0" class="menu_level">
    <div class="editor">
        <div class="ui_details">
            <div class="dialog_buttons">
                <!-- this in onclick="" is the button element -->
                <button class="ui_btn" type="button" onclick="console.log(this.closest('.menu_level'))">OK</button>
            </div>
        </div>
    </div>
</div>