Question

我希望能够点击身体内的任何位置，除了一个特定元素。我无法找出我所做的代码有什么问题。

当我点击.except中的一个特定元素body时，我不想让它隐藏，但当我点击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";

}

感谢任何帮助。原谅我格式不正确（这是我在这里的第一篇文章）。谢谢！

Answer 1

您需要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>

Answer 2

你真的不需要任何标志来做到这一点。只需点击正文并根据点击的项目（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";
}

Answer 3

你遗失了一件。如果单击了

，则需要阻止事件从except对象冒泡

except.addEventListener("click", function(event){event.stopPropagation()}, false);

Answer 4

我更喜欢这样的事情，而不是停止在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
   }
})

Javascript：单击body中的任何位置，除了其中的一个元素

4 个答案: