javascript - 如果点击背景不工作隐藏容器

Question

如果单击背景而不是 div，我会尝试隐藏弹出窗口。基本上，当用户点击背景时，它会隐藏 div；但是，如果用户单击实际的 div，它仍会隐藏它。我只希望在点击背景时隐藏 div。

这是我的代码:

HTML

<div id="linkinputholder">
    <div id="linkinputbox">
        Title
    </div>
</div>

<button onclick="displaylinkinput()" type="button"> Display </button>

CSS

#linkinputholder {
  display: none;
  position: fixed;
  z-index: 100;
  width: 100%;
  min-height: 100%;
  left: 0px;
  top: 0px;
  background: rgba(0, 0, 0, 0.2);
}

#linkinputbox {
  display: block;
  background-color: red;
  width: 500px;
  height: 100px;
  position: fixed;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

JS/Jquery

function displaylinkinput() {
    document.getElementById('linkinputholder').style.display = "block";
}

    $('#linkinputholder').click(function() {
        document.getElementById('linkinputholder').style.display = "none";
    });

Answer 1

我假设您所说的背景是指您的 linkinputholder div，它是 100% 宽 x 100% 高。您的 jquery 代码缺少对 displaylinkinput 的调用，因此我添加了一个点击事件处理程序来调用它。当您单击 linkinputbox div 时，单击事件向下传递到 linkinputholder。为防止这种情况，只需停止事件传播。

$('#linkinputbox').click(function (evt) {
        evt.stopPropagation();
    });

我在这里为您创建了一个 JSFIDDLE:http://jsfiddle.net/seadonk/oLgex1pq/

这是更正后的 javascript:

function displaylinkinput() {
    $('#linkinputholder').show();
}

$(function () {
    $('button').click(function () {
        displaylinkinput();
    });

    $('#linkinputholder').click(function () {
        $('#linkinputholder').hide();
    });

    $('#linkinputbox').click(function (evt) {
        evt.stopPropagation();
    });
})();