Question

我正在尝试创建一个代码，允许我点击屏幕的任何部分，当我点击屏幕时，应显示消息“click！” 到目前为止，我得到了下一个代码

HTML：

<html>
    <head>
         <title>Sense events anywhere</title>
         <script type="text/javascript" src="anywhere.js"></script>
         <link type="text/css" rel="stylesheet" href="anywhere.css" />
    </head>
    <body id="body" onload="init();">
      <div id="message"> Click! </div>
  </body></html>

JavaScript的：

var e;
function init(){
   e = document.getElementById("message");
   document.getElementById("message").style.visibility = "hidden";
   e.onmousedown = displayIt(e);
   e.onmouseup = hideIt;
}     
function displayIt(e) {
   e.style.visibility = "visible";
}
function hideIt() {
   e.style.visibility = "hidden";   
}

CSS：

body {  
}
div#message{
}

到目前为止，我只是在点击时尝试将信息显示为“隐形”，但它不起作用对不起我的英语，我不是母语人士。如果有人能帮助我，那将是伟大的。感谢。

Answer 1

var visible = true,
body = document.getElementById("body"),
mess = document.getElementById("message");

body.onclick = function() {
     if (visible === true) {
        mess.style.visibility = "hidden";
        visible = false;
} else {
        mess.style.visibility = "visible";
        visible = true;
       }
}

编辑替换了选择器中的正文，因为我没有注意到您想要点击屏幕的任何部分

Answer 2

使用jQuery解决方案（我建议您使用display属性。因为，如果使用可见性，元素将保留其空间，即使它被隐藏。使用display：none;元素被“删除”。）：

<强> HTML

<div id="message"> Click! </div>

<强> CSS

#message {
   display: none;
}

<强>的jQuery

$(document).ready(function(){
    $(window).click(function(){
        $('#message').toggle();
    });
});

DEMO：http://jsfiddle.net/j3KVT/2/

如果你想使用visibility属性，那么这是jQuery中的一个解决方案：

<强> HTML

<div id="message">Click!</div>

<强>的jQuery

$(document).ready(function () {
    $('#message').css('visibility', 'hidden');
    $(window).click(function () {

        if ($('#message').css('visibility') == 'hidden') 
        $('#message').css('visibility', 'visible');

        else $('#message').css('visibility', 'hidden');

    });
});

DEMO：http://jsfiddle.net/j3KVT/3/

Answer 3

我建议：

function toggleMessage(targetID){
    var target = document.getElementById(targetID),
        display = target.style.display;
    target.style.display = display && display == 'block' ? 'none' : 'block';
}

document.body.addEventListener('click', function(){
    toggleMessage('message');
});

Simple JS Fiddle demo

修改以上内容使用visibility（而不是display）：

function toggleMessage(targetID){
    var target = document.getElementById(targetID),
        visibility = target.style.visibility;
    target.style.visibility = visibility && visibility == 'visible' ? 'hidden' : 'visible';
}

document.body.addEventListener('click', function(){
    toggleMessage('message');
});

Simple JS Fiddle demo

参考文献：

EventTarget.addEventListener()。

JavaScript：如何在单击时更改元素的可见性？

3 个答案: