javascript - “表单失焦后,如果鼠标点击的不是指定元素,指定元素隐藏”这个判断怎么写?
过去多啦不再A梦
过去多啦不再A梦 2017-05-19 10:10:37
[JavaScript讨论组]

结构大概样子是这样的

<input type = text  id="create-tag" >

<ul id="tags-list">
    <li>test1</li>
    <li>test2</li>
    <li>test3</li>
<ul>
过去多啦不再A梦
过去多啦不再A梦

全部回复(2)
过去多啦不再A梦

你要实现的效果:气泡提示 1.点击某个目标显示气泡;2.点击气泡自身内容不隐藏;3.点击气泡以外的地方隐藏

分析:写document的点击事件隐藏气泡,而点气泡不影藏,则在气泡的点击事件阻止冒泡

jQuery的环境来写

//点击显示
$('#create-tag').click(function (e) {
    $('#tags-list').show();
    //阻止冒泡
    if (e && e.stopPropagation) { e.stopPropagation() }
    else { window.event.cancelBubble = true }

    setTimeout(function () {
        //阻止冒泡 即点击自身内容不影藏
        $('#tags-list').click(function (e) {
            if (e && e.stopPropagation) { e.stopPropagation() }
            else { window.event.cancelBubble = true }
        });
        //点击空白影藏
        $(document).on('click', function () {
            //隐藏
            $('#tags-list').hide();
            //并且删除该点击事件
            $(document).off('click', arguments.callee);
        });
    }, 200)
});

这种需求一般是在写弹窗点击空白地方自动隐藏用得比较多,另外打个广告,jz弹窗插件

天蓬老师

假定你说的指定元素是 #tags-list

document.body.onclick=function () {
        if(event.target.id !== 'tags-list'){
            document.getElementById('tags-list').style.display = 'none';
        }
    }
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号