点击元素，目标元素显示和隐藏。点击其他非指定区域，目标元素隐藏

柠檬花开_

于 2022-10-31 17:43:04 发布

阅读量280

点赞数

文章标签：指定元素隐藏 toggle 点击非指定元素或区域，元素隐藏

本文链接：https://blog.csdn.net/Sunny_lxm/article/details/127620089

版权

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    // 点击icon  img显示和隐藏
    document.getElementById("help_outline_icon").addEventListener('click', function (e) {
        console.info(e)
        stopProp(e);
        $('#serial_no_img').toggle() // img显示和隐藏
    }, false)
    // 点击本身，不隐藏
    document.getElementById("serial_no_img").addEventListener('click', function (e) {
        stopProp(e);
    }, false)
    // 点击其他位置 serial no 提示图片 - 隐藏 
    $(document).click(function(e){
        e = window.event || e;
        var obj = e.srcElement || e.target;
        if(!$(obj).is('#help_outline_icon_box')) {
            $('#serial_no_img').hide();
        }
    });
    /**
     * 阻止事件冒泡
     */
    function stopProp (e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }
   
</script>
</html>

说明：

1、$(obj).is('#help_outline_icon_box') 为目标检测区域，即为鼠标单击区域是否为指定的div元素或层；

2、(事件对象)IE：有window.event对象
　　火狐：没有window.event对象。可以通过给函数的参数传递event对象。如οnmοusemοve=doMouseMove(event)
　　解决方法：var event = event || window.event;

3、(事件源)IE下,event对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,
但是没有srcElement属性.

　　解决办法：var obj = e.srcElement || e.target

效果图：