js:类似tooltip的显示与隐藏

开发的时候，有时候总能遇到这种效果，你的鼠标点击一个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="width: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>

posted on 2017-08-11 16:59 yyy_鸳鸯阅读(490) 评论(0) 编辑收藏举报