zoukankan      html  css  js  c++  java
  • 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="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>
  • 相关阅读:
    .net c# gif动画如何添加图片水印
    Webbrowser控件设置所使用的内核
    WPF 用户控件不显示标记
    Spark应用场景以及与hadoop的比较
    Spark基本函数学习
    uniapp H5发布后在部分手机字体变大,导致页面错乱
    uni 小程序图片路径转base64
    uniapp px与upx(rpx)相互转换
    uniapp调用扫码功能
    uniapp 引入第三方字体
  • 原文地址:https://www.cnblogs.com/ycherry/p/7346839.html
Copyright © 2011-2022 走看看