美文网首页
获取鼠标相对盒子的位置

获取鼠标相对盒子的位置

作者: 苦咖啡Li | 来源:发表于2018-08-14 12:57 被阅读0次

1、 获取鼠标相对盒子的位置

//  获取鼠标相对盒子的位置
        getMousePos(event, el) {
            event = event || window.event;
            var pagex = event.pageX || scroll().left + event.clientX;
            var pagey = event.pageY || scroll().top + event.clientY;
            var divx = el.offset().left;
            var divy = el.offset().top;
            var targetx = pagex - divx;
            var targety = pagey - divy + el.scrollTop() + 15;
            return {x: targetx, y: targety}
        },

2、获取盒子中鼠标选中的文字

//  获取盒子中鼠标选中的文字
        funcGetSelectText() {
            var txt = '';
            if (document.selection) {
                txt = document.selection.createRange().text;//ie
            } else {
                txt = document.getSelection();
            }
            return txt.toString();
        },

3、获取鼠标选中文字

//  获取鼠标选中文字
        selectTxt(){
            let container = $('.previewBox');      //   文字所属盒子
            container.on('mouseup', function () {
                //     获取鼠标选中的文字
               let  selectAddTxt =  funcGetSelectText();
                //    计算鼠标相对盒子的位置   obj = { x:1, y:1}
               let  obj =  getMousePos(event, container); 
            })

相关文章

  • 获取鼠标相对盒子的位置

    1、 获取鼠标相对盒子的位置 2、获取盒子中鼠标选中的文字 3、获取鼠标选中文字

  • 拖拽元素JS实现方法

    思路: onmousedown :鼠标按下的时候,记录鼠标所在的位置pageX,pageY记录鼠标相对于盒子的位置...

  • 获取宽高、加载(DOM)、currentStyle、getCom

    鼠标在可视区中的坐标 获取可视区宽高 获取滚动距离 获取内容宽高 获取盒子模型宽高 获取元素的相对位置 获取元素的...

  • JS放大镜

    这种布局方式相对来说更好操作,小图和大图在同一个盒子里;难点在于获取鼠标在盒子中的位置,不明白的朋友可以自己画图,...

  • 16.鼠标位置

    1.鼠标位置 1.1clientX,clientY 1.clientX 设置或获取鼠标指针位置相对于窗口客户区域的...

  • 获取鼠标在盒子中的位置

  • jQuery拖拽

    思路 父盒子相对定位,子元素,也就是被拖拽的元素绝对定位 当鼠标在子元素中按下时,绑定鼠标移动事件,根据鼠标位置改...

  • 获取鼠标位置

    e.clientX和e.clientY 获取鼠标在浏览器可视区域的坐标 e.pageX和e.pageY 获取鼠...

  • pageX、clientX、screenX、offsetX、Sc

    1、鼠标事件 clientX 设置或获取鼠标指针位置相对于浏览器内容窗口的 x 坐标,其中客户区域不包括窗口自身的...

  • F1赛车小游戏-2(元素)

    放置车子(图片)调宽度,设置相对位置和绝对位置大盒子外设置相对位置(position:relative)大盒子内设...

网友评论

      本文标题:获取鼠标相对盒子的位置

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