Question

我创建了一个简单的弹出窗体，当窗体外发生单击事件时窗体关闭;但是，单击任何表单子元素也会关闭弹出窗口。我是否需要将标签和输入元素添加到＆＃39; if＆＃39; JS函数中的语句？

HTML

if(x==="john"||"micheal"||"daisy"||"smith")

JS

    <button id="contactButton" onclick="show()">Contact</button>
    <div id="main">

    <div id="formDiv">
        <form action="" id="form" method="POST">
            <label id="name">Name:</label>
            <input type="text" name="name"><br>
            <label>Email:</label>
            <input type="text" name="name"> <br>
            <input type="submit" value="Submit">
        </form>
    </div>
    </div>

Answer 1

我是否需要将标签和输入元素添加到JS函数中的'if'语句？

是的，但解决方案的一般实现是获取目标，然后递归检查parentNode，直到找到document.getElementById("form"))或父母用完为止。

Answer 2

试试这个;

function hide(e) {
    if (e.closest('#form')) {
        console.log("inside");
        return;
    } else {
        document.getElementById("main").style.display="none";
        console.log("outside");
    }
}

单击表单子元素时弹出窗体关闭

2 个答案: