美文网首页
选中分享

选中分享

作者: 奶瓶SAMA | 来源:发表于2017-01-13 17:54 被阅读0次
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #p1{
                width: 300px;
            }
            #div1{
                position: absolute;
                display: none;
            }
        </style>
        <script>
            window.onload= function () {
               function selectText(){
                   if(document.selection){
                       return document.selection.createRange().text;
                   }else{
                       return window.getSelection().toString();
                   }
               }
    
                var op=document.getElementById('p1');
                var odiv=document.getElementById('div1');
    
                op.onmouseup= function (ev) {
                    var ev=ev||event;
                    var left=ev.clientX;
                    var top=ev.clientY;
                    if(selectText().length>10){
                        setTimeout(function () {
                            odiv.style.display='block';
                            odiv.style.left=left+'px';
                            odiv.style.top=top+'px';
                        },100);
                    }else{
                        odiv.style.display='none';
                    }
                };
                document.onclick= function () {
                    odiv.style.display='none';
                };
    
                odiv.onclick= function () {
                    alert('点击了');
                    window.open('http://www.baidu.com','_self');
                };
    
            };
        </script>
    </head>
    <body>
    <p id="p1">
        事件默认行为:当一个事件发生的时候浏览器自己会做的事情,有些时候不需要这些行为,那怎么阻止?
        当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false事件默认行为:当一个事件发生的时候浏览器自己会做的事情,有些时候不需要这些行为,那怎么阻止?
        当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false事件默认行为:当一个事件发生的时候浏览器自己会做的事情,有些时候不需要这些行为,那怎么阻止?
        当前这个行为是什么事件触发的,然后在这个事件的处理函数中使用return false
    </p>
    <div id="div1">![](1.png)</div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:选中分享

          本文链接:https://www.haomeiwen.com/subject/khmsbttx.html