开发的时候，有时候总能遇到这种效果，你的鼠标点击一个input的时候，会显示一些相关的内容，我们把它叫做A，鼠标点击其他不是A的地方，A会消失，但是点击A时，A还是存在。
要实现这种效果的思路：
注意三个地方：（1）点击input本身，显示A （2）点击A，A还是显示 （3）点击不是A的其他地方，A隐藏。
这个效果的难点就在于怎么区分鼠标点击的是A还是除A以外的其他地方。
要选中所有地方很简单，就是选中body，对body的click事件进行处理，使其点击的时候A消失。点击A，使A还是显示也简单，关键是由于事件的冒泡，点击A时，A还是显示，但是事件冒泡到body之后，A就会消失，要怎么解决这个问题，就是阻止事件冒泡。同理，点击input的时候使A显示，也会冒泡，也要阻止冒泡，使其不会消失。
通过上面的方法就能实现，除了在input和A以外的地方点击都能使A消失，而在input和A上点击，A不会消失。
代码如下：
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <input type="text" id="testInput"> <div style="200px;height:200px;background-color:red;display:none" id="testDiv"></div> <script> var testInput = document.getElementById("testInput"); var testDiv = document.getElementById('testDiv'); var body = document.body; testInput.onclick = function(event){ testDiv.style.display = 'block'; event.stopPropagation(); } testDiv.onclick = function(event){ testDiv.style.display = 'block'; event.stopPropagation(); } body.onclick = function(){ testDiv.style.display = 'none'; } </script> </body> </html>