选中文字，弹出层；点击空白处，弹出层隐藏--判断触发源，判断用户选择内容

最新推荐文章于 2024-08-28 14:05:15 发布

秋天1014童话

最新推荐文章于 2024-08-28 14:05:15 发布

阅读量1.4k

点赞数

分类专栏： web前端 javaScript

本文链接：https://blog.csdn.net/u013217071/article/details/53672896

版权

web前端同时被 2 个专栏收录

128 篇文章 1 订阅

订阅专栏

javaScript

87 篇文章 0 订阅

订阅专栏

选中文字，弹出层；点击空白处，弹出层隐藏

知识点：判断触发源，判断用户选择内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .test{
            margin-top: 50px;
            width: 500px;
            height: 200px;
            position: relative;
        }
        .popup{
            max-width: 80px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: 0;
            display: none;
        }
        .another{
            margin-top: 50px;
            width: 500px;
            height: 200px;
        }

    </style>    
</head>
<body>
    <!-- 选中文字，弹出层； 点击空白处，弹出层隐藏 -->
    <div class="test" id="test">
        我是要复制的内容，知道吗？你要加油，知道吗》哈哈哈，加油!我是要复制的内容，知道吗？你要加油，知道吗》哈哈哈，加油我是要复制的内容，知道吗？你要加油，知道吗》哈哈哈，加油
    </div>
    <div class="popup" id="popup"></div>

    <div class="another">
        我是其他的内容，主要看看你的功能是不是完善，要时选我也能出来弹出层，就是你的问题了！我是其他的内容，主要看看你的功能是不是完善，要时选我也能出来弹出层，就是你的问题了！
    </div>


    <script type="text/javascript" src="jsutils.js"></script>
    <script>    
        $('test').onmouseup = function(event) {
            var event = event || window.event;
            var x = event.clientX;
            var y = event.clientY;
            //判断是否选择了内容
            var txt;
            if(window.getSelection){
                txt = window.getSelection().toString();
            }else{
                txt = document.selection.createRange().text;
            }
            if(txt){
                setTimeout(showPopup(x,y,txt),100); //延迟100ms，再出现
            }
        }

        function showPopup(mousex,mousey,content){
            $('popup').style.display = "block";
            $('popup').style.left = mousex + "px";
            $('popup').style.top = mousey + "px";
            $('popup').innerHTML = content;
        }

        document.onmousedown = function(event){
            var event = event || window.event;
            var targetId = event.target ? event.target.id : event.srcElement.id;
            if(targetId != "popup"){
                $('popup').style.display = "none";
            }
        }
    </script>
</body>
</html>