Javascript:单击正文中除其中一个元素外的任何位置

Javascript: Click anywhere in body except the one element inside it

本文关键字：元素 一个 任何 位置 单击 正文 Javascript      更新时间：2023-09-26

我希望能够点击主体内的任何地方，除了一个特定的元素。我找不出我所做的代码出了什么问题。

当我单击body中的一个特定元素.except时，我不希望它隐藏，但当我单击body时，它应该隐藏。

HTML

<html>
  <head>
    <title>Click anywhere except that specific element</title>
  </head>
  <body id="wrapper">
    <center>
      <div id="except"></div>
    </center>
  </body>
</html>

JS

var body = document.getElementById('wrapper');
var except = document.getElementById('except');
if(body.addEventListener)
  body.addEventListener("click", function(){bodyClick("yes")}, false);
else
  body.attachEvent("onclick", bodyClick);
function bodyClick(clicked){
  except.addEventListener("click", exceptClick,false);
  function exceptClick(){
    bodyClick("no");
    if(clicked === "yes")
      except.style.display = "none";
  }
  if(clicked === "yes")
    except.style.display = "none";
  else
    except.style.display = "show";
}

感谢您的帮助。请原谅我的格式不正确（这是我在这里的第一篇文章）。非常感谢。

您需要将stopPropagation连接到外部元素。

下面是一个简单的说明：http://jsfiddle.net/5mhqrhwk/3/

var body = document.getElementById('wrapper');
var except = document.getElementById('except');
body.addEventListener("click", function () {
    alert("wrapper");
}, false);
except.addEventListener("click", function (ev) {
    alert("except");
    ev.stopPropagation(); //this is important! If removed, you'll get both alerts
}, false);

HTML:

<div id="wrapper">
    <center>
        <div id="except"></div>
    </center>
</div>

您实际上不需要任何标志就可以做到这一点。只需听身体点击，根据点击的项目做不同的事情（event.target）。这个代码应该完全按照你的意愿（基于你的代码）：

var body = document.getElementById('wrapper');
var except = document.getElementById('except');
if(body.addEventListener)
  body.addEventListener("click", bodyClick, false);
else
  body.attachEvent("onclick", bodyClick);
function bodyClick(event){
  if(event.target != except)
    except.style.display = "none";
}

与其停止在except元素上的传播，我更喜欢这样的东西：

var wrapper = document.querySelector('wrapper');  
document.addEventListener('click', function(e) {
   if ( !wrapper.contains(e.target) ) {
       // Do something when user clicked outside of wrapper element
   }
})

您缺少了其中的一部分。如果单击，则需要阻止事件从except对象冒泡

except.addEventListener("click", function(event){event.stopPropagation()}, false);
相关文章：