选中分享

<!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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏无原型不设计

Mockplus:如何调整图标的大小和方向?

使用属性面板上的大小设置,可以很方便地调节图标大小。 ? 调整方向还是通过属性面板来完成: ? 另外:有些图标调整了大小之后可以用做特别的用途哟,比如 S...

28830
来自专栏mySoul

文档和元素的几何滚动

当浏览器在窗口中渲染文档时,它将会创建文档一个视觉表现层,在哪里每个元素都有自己的位置和尺寸。通常web应用程序将文档看做元素的树。

17800
来自专栏高爽的专栏

HTML锚点

        以前只是知道有锚点这么个东西,一直没有用到,昨天做毕设用到了锚点,现在总结一下控制锚点的几种情况:         1. 在同一页面中 <a n...

53400
来自专栏九彩拼盘的叨叨叨

学习前端 第1周第2天

9620
来自专栏Spring相关

Vue中webpack的Style的lang和Scoped属性

修改goods.vue中的style我们会发现到goods的时候回影响到其他的div样式,添加scoped作用域可以解决这个问题,如下:

30820
来自专栏韦弦的偶尔分享

微信小程序button组件样式

需要使用微信小程序button组件的open-type来实现授权之类的操作时,发现样式并不是自己想要的,然后改起来也并不是很方便,下面让我们一起看一下:

4.3K40
来自专栏编程微刊

clientX和clientY 事件属性的使用

做项目中遇到一个这样的需求,点击属性菜单节点,出现显示框,显示框的位置随着鼠标点击的位置距离而改变。

24610
来自专栏smy

解决ios不支持按钮:active伪类的方法

 mozilla开发社区上有 :active 不起作用的答案: [1] By default, Safari Mobile does not use the :...

34470
来自专栏Huramkin的归档库

VSCode的快捷键

|快捷键|作用| |Alt + Click| 插入光标-支持多个| |Ctrl + Alt + up/down |上下插入光标-支持多个| |Ctr...

2K10
来自专栏姬小光

【第012期】如何设置页面锚点

不知道大家有没有注意到,在我们上网的时候,会看到有些链接打开之后可以直接定位到页面的某个位置处。

15530

扫码关注云+社区

领取腾讯云代金券