博客

onmouseover事件执行内容问题

为了设计可收缩菜单栏，当鼠标经过指定位置是显示拖拉光标并可点击进行拖拉，但在onmouseover事件中进行拖动距离的叠加会造成拖动距离大于实际移动距离，因此：

1、在onmouseover事件外对原始位置及菜单宽度等进行取值

2、在onmouseover事件里面只进行原始值+拖动距离，这样能保证只增加实际拖动的距离。

3、同时还要注意onmouseover事件在进行距离处理时需要判断距离是否改变，只有改变时才进行宽度处理

获取元素宽度

1、

.style.width

可以获取内敛样式的width，css文件中的和内嵌式无法获得

2、

.clientWidth

获取的是元素自身的宽度+内边距， 但不包括边框和外边距

js获取元素的left和top值

1、

.el.style.left

仅能获取行内样式中的left

2、

el.getBoundingClientRect()

返回DOM元素的各个位置属性对象,

rect: {
  width: ...,
  height: ...,
  left: ...,
  rigth: ...,
  top: ...,
  bottom: ...,
  x: ...,
  y: ...
}在这里插入代码片

参考博文



参考博文

//左侧菜单伸缩
        //鼠标经过菜单右侧显示伸缩样式
        $(document).on('mouseover', '#striryLine', function (ev) {
            var mouse=$(this);
            document.onmousemove = function(e) {//鼠标移动
                if(e.clientX<=$('#leftmenu')[0].clientWidth+10 && e.clientX>=$('#leftmenu')[0].clientWidth-15){//设置显示可拖动光标的范围
                    mouse.css('cursor','e-resize');
                }else{
                    mouse.css('cursor','default');
                }
            }
        });
        //鼠标按下标记移动开始x轴位置
        $(document).on('mousedown', '#striryLine', function (e) {
            //只有鼠标样式为e-resize时才可以点击
            if(e.clientX<=$('#leftmenu')[0].clientWidth+10 && e.clientX>=$('#leftmenu')[0].clientWidth-15){
                var startX= e.clientX;//初始位置
                var doLen;
                var toplogoWidth=$('#toplogo')[0].clientWidth;
                var leftMenuWidth=$('#leftmenu')[0].clientWidth;
                var layuiletfMenuWidth=$('.layui-left-menu')[0].clientWidth;
                var layuiletftreeWidth=$('.layui-nav-tree')[0].clientWidth;
                var layuibodyleft=$('.layui-body')[0].getBoundingClientRect().left;
                document.onmousemove = function(e){//鼠标移动
                    console.log(startX+":"+e.clientX);
                    var endX=e.clientX;
                    if(endX-startX!=doLen){
                        doLen=endX-startX;
                        console.log("移动了："+doLen);
                        if(doLen>0 && endX<400||doLen<0 && endX>210){//向右扩展菜单,菜单宽度+,页面left-,并限制能伸缩的最大距离（应以菜单的最小宽度+可伸缩最大长度为准,即终点位置）
                                                                    //向左收缩扩展菜单,菜单宽度-,页面left+,并限制能伸缩的最大距离（应以菜单的最小宽度为准,即终点位置）
                            $('.layui-body')[0].style.left=layuibodyleft+doLen+"px";
                            $('#toplogo')[0].style.width=toplogoWidth+doLen+'px';
                            $('#leftmenu')[0].style.width=leftMenuWidth+doLen+'px';
                            $('.layui-left-menu')[0].style.width=layuiletftreeWidth+doLen+'px';
                            $('.layui-nav-tree')[0].style.width=layuiletftreeWidth+doLen+'px';
                        }
                        document.onmouseup=function (ev) {
                            ev.stopPropagation();
                            document.onmousemove = null;
                            document.onmouseup = null;
                            $('#striryLine').releaseCapture && resize.releaseCapture();
                        }
                        $('#striryLine').setCapture && resize.setCapture();
                        return false;
                    }
                }
            }
        });
        $(document).on('ondragenter', '#striryLine', function () {
            event.preventDefault();
        })
        $(document).on('dragenter', '#striryLine', function (evt) {
            evt.preventDefault()
        })