JS-设置/获取鼠标光标所在位置；获取鼠标点击位置

快来打我* 2022-05-18 09:17 577阅读 0赞

#### 鼠标光标所在位置 ####

// 设置鼠标光标所在位置.
    function setCaretPosition(elem, pos){ //设置光标位置函数
        if(elem.setSelectionRange) {
            elem.focus();
            elem.setSelectionRange(pos,pos);
        } else if (elem.createTextRange) {
            var range = elem.createTextRange();
            range.collapse(true);
            range.moveEnd('character', pos);
            range.moveStart('character', pos);
            range.select();
        }
    }
    
    // 获取鼠标光标所在位置.
    function getCaretPosition(element) { 
        var cursorPos = 0;
        if (document.selection) {
       //IE
            var selectRange = document.selection.createRange();
            selectRange.moveStart('character', -element.value.length);
            cursorPos = selectRange.text.length;
        } else if (element.selectionStart || element.selectionStart == '0') {
            cursorPos = element.selectionStart;
        }
        return cursorPos;
    }

#### 获取鼠标点击位置demo ####

/*获取鼠标点击位置-该方法用于点击用户头像显示详情.*/
    // 点击页面任意位置都隐藏相应元素.
    $(document).click(function(){ 
            // 隐藏相应元素.
        $(".element").hide();
        // 阻止冒泡事件，即document事件对该属性元素无效.
        $(".element").click(function(event){ 
            event.stopPropagation();
            });
    
    });
    document.onclick=function(event){ 
        var e = event || window.event;
        var yy = e.clientY + document.body.scrollTop;
        var xx = e.clientX;
    // console.log(yy+'，'+xx);
        var top = yy-200;
        var left = xx+30;
        // 鼠标点击到最右侧范围.
        if (xx > 1000) {
            top = yy-180;
            left = xx-300; 
        }
        if (yy > 600) {
            top = yy-260;
        }
        if (yy < 150) {
            top = yy+20;
        }
        $('.element').css({top: top, left:left});
        $('.element').css({top: top, left:left});
    };