鼠标右键显示弹窗,左键弹窗消失

最新推荐文章于 2024-08-11 18:40:36 发布

JCT-多多

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量314

点赞数 1

文章标签： html5 javascript jquery

本文链接：https://blog.csdn.net/qq_45761438/article/details/139442467

版权

实现效果:在div1里面右键就会显示div2,div2显示在右键点击位置的旁边,并且div2不能超出div1的范围,左键点击div1的其它部分div2就会消失,左键点击div2,这时候div2不会消失.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="./jquery/jQuery.min.js"></script>
    <title>右键显示Div示例</title>
</head>

<body>
    <div id="div1">
        <div id="div2">我是内容</div>
    </div>
</body>
<script>
    $(document).ready(function () {
        var $div1 = $('#div1'), $div2 = $('#div2');
        // 右键点击div1时显示div2，并确保div2不超出div1边界
        $div1.on('contextmenu', function (e) {
            e.preventDefault();
            var offset = $div1.offset(),
                div1Width = $div1.outerWidth(),
                div1Height = $div1.outerHeight(),
                x = e.pageX - offset.left,
                y = e.pageY - offset.top;

            // 确保div2在div1范围内
            if (x + $div2.outerWidth() > div1Width) x = div1Width - $div2.outerWidth();
            if (y + $div2.outerHeight() > div1Height) y = div1Height - $div2.outerHeight();
            if (x < 0) x = 0;
            if (y < 0) y = 0;

            $div2.css({ top: y, left: x }).show();
        });
        // 左键点击页面时隐藏div2
        $(document).on('click', function (e) {
            if (e.target.id !== 'div2') { // 确保只在点击非div2区域时隐藏
                $div2.hide();
            }
        });
    });
</script>
<style>
    #div1 {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: #ccc;
        margin: 100px;
    }

    #div2 {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        padding: 10px;
        z-index: 1000;
    }
</style>

</html>

通过计算div1的偏移量（offset()）和尺寸（outerWidth()、outerHeight()），我们可以确定鼠标点击位置相对于div1的位置，并据此设置div2的位置，确保它不会超出div1的边界。
在设置div2的top和left值之前，我们通过比较确保了div2的右下边缘不会超过div1的右下边缘，同时确保其左上边缘不会小于0，防止负值导致的定位问题。
左键点击事件中，我们增加了判断e.target.id，确保只有在点击非div2区域时才隐藏div2，这样用户可以直接点击div2而不会立即消失，提升了用户体验。

JCT-多多

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标右键显示弹窗,左键弹窗消失

实现效果:在div1里面右键就会显示div2,div2显示在右键点击位置的旁边,并且div2不能超出div1的范围,左键点击div1的其它部分div2就会消失,左键点击div2,这时候div2不会消失.
复制链接

扫一扫