在模态之外单击时，Javascript模态不会关闭

Question

因此，我是javascript新手，并且正在尝试为包含Nav的网站设置模式。 我希望用户每次在其外部单击时都可以关闭该模式，这很容易，并且大量教程向我展示了不同的方法，但是所有这些方法都出错或不起作用。 作为参考，这里是我的HTML：

    <!DOCTYPE html>
<html>
    <head>
        <title>Joe's Cars</title>
        <link rel="stylesheet" type="text/css" href="style.css" >
        <script src="https://use.fontawesome.com/d862ed6876.js"></script>
        <link href="https://fonts.googleapis.com/css?family=Lora|Raleway|Source+Sans+Pro" rel="stylesheet">

    </head>
    <body>
        <header>
            <button id="openNav"><i class="fa fa-bars" aria-hidden="true"></i></button>
        </header>

        <div class="navModal" id="navModal">
            <p>Navigation</p>
            <button  id="closeNav">close</button>
        </div>

        <script src="nav.js"></script>
    </body>
</html>

javascript如下：

    var modal = document.getElementById('navModal');
var openBtn = document.getElementById('openNav');
var closeBtn = document.getElementById('closeNav');

function openNav() {
    modal.style.display = "block";
}

function closeNav() {
    modal.style.display = "none";
}

function outsideClick(e) {
    console.log('outside click called');
    if(e.target == modal){
        console.log('if statement executed');
        modal.style.display = 'none';
    }
}


openBtn.addEventListener('click', openNav);
closeBtn.addEventListener('click', closeNav);
window.addEventListener('click', outsideClick);

当我在导航栏之外单击时，将调用窗口单击，控制台将其记录为“外部单击的调用”，但是if语句不会执行。 这可能很明显，但是我之前从未使用过JavaScript事件处理程序，而google搜索带来的东西超出了我的理解。

谢谢大家

Answer 1

您不应该执行if(e.target == modal){而是if(e.target !== modal){ 。

您还应该将openNav更改为：

function openNav(e) {
    e.stopPropagation();
    modal.style.display = "block";
}

否则，当您单击打开按钮时，它将打开和关闭您的模态。

在模态之外单击时，Javascript模态不会关闭

问题描述

1 个解决方案

解决方案1
0 2017-09-27 10:20:31

在模态之外单击时，Javascript模态不会关闭

问题描述

1 个解决方案

解决方案1 0 2017-09-27 10:20:31

解决方案1
0 2017-09-27 10:20:31