Question

我有一个包含多个div的页面，当有人点击其中一个时，它会调用一个javascript方法。如果有人点击正文，我需要能够触发另一个方法调用，这意味着他们没有点击div而是在div之外。当我在body标签上放置一个jquery click处理程序时，即使单击div也会触发它。任何人都知道如何将点击限制在div之外的任何东西？感谢。

Answer 1

您需要检查点击事件的原始目标。它可以e.target访问，其中e是点击事件。

var div = document.getElementById('the-div');

document.body.onclick = function (e) {
  var target = e.target;
  while (target !== document.body) {
    if (target === div) {
      // The user clicked inside the div
      return;
    }
    target = target.parentNode;
  }

  // do the stuff you want when they click outside the div here
};

Answer 2

您可以在整个文档中设置onclick回调：

document.onclick = function(){
    alert("CLICK");
};

另见JavaScript event delegation

Answer 3

您可以让整个窗口跟踪点击事件，如果单击该div，将停止事件传播。

<!DOCTYPE html>
<html>
    <head>
        <title></title>

        <style>

            #wrapper {
                position:absolute;
                left:0px;
                top:0px;
                width:100%;
                height:100%;
            }

            #antidiv {
                position:absolute;
                left:40px;
                top:80px;

                width:100px;
                height:100px;

                background-color:#3FF;
            }

        </style>

    </head>
    <body>

        <div id="wrapper">

            <div id="antidiv"></div>


        </div>

        <script>

            document.getElementById("antidiv").addEventListener("click", function(e) {
                e.stopPropagation();
            }, false);

            document.body.addEventListener("click", function(e) {
                alert("You didn't click the div!");
            }, false);




        </script>

    </body>
</html>

如何抓住点击页面正文

3 个答案: