DOM事件探秘_技术问答

qq_xy_29

请问我这样写为什么松了鼠标之后，边框还是跟着鼠标移动: 知道原因了。。。。; 2020-06-14 1回答·821浏览

qq_安宁_11

clientX跟offsetWidth是什么意思？

clientX是鼠标光标的坐标

offsetWidth是元素的宽度

2019-07-19 1回答·937浏览

qq_慕圣626863

无法设拖拽边界: 是你容器没有处理好; 2019-07-05 1回答·979浏览

慕UI2209042

关于移动问题: 2019-05-23 1回答·843浏览

outLink

第一次拖动完再次点击无法拖拽

问题已解决，主要原因在于不同类型值的计算后导致disX值为NaN。

使用parseInt()方法把px类型转换成数值类型，可以修成错误。

2019-05-22 1回答·1252浏览

qq_请输入昵称_3

onmousemove事件绑定的函数，为什么不能用第二个红线那种形式写？: 可以啊。俩个都一样，一个是匿名函数，一个是有名函数。触发这个是事件记得传event给这个函数就行了。; 2018-09-25 1回答·1470浏览

慕慕2280070

onmousemove 一定要绑定到document上吗这难道就是传说中的委托？: 2018-03-25 3回答·2108浏览

慕粉154022159

三个变量只需要写一个var ?

为了使代码更加简洁，可以一次性声明多个同种类型的变量，例如：var a,b,c; 注意中间使用“,”隔开。

老师只是在每个变量之后敲了个回车，这样看起来就很像漏了个var

2017-11-30 3回答·1846浏览

qq_巴黎魅影_0

请帮忙查看为什么没有效果显示哪里错了: 获取标签名的时候，input是不是应该用""括起来啊？; 2017-10-22 1回答·662浏览

qq_巴黎魅影_0

请帮忙查看为什么没有效果显示哪里错了: input是不是要加引号; 2017-10-22 1回答·645浏览

qq_巴黎魅影_0

请帮忙查看哪里有问题执行不了: 使用getELementsByTagName()方法，标签名需要在引号中; 2017-10-22 1回答·619浏览

qq_巴黎魅影_0

请问我的代码哪里有错吗: 已采纳我要SSR 的回答; 你的函数没有执行啊; 2017-10-12 1回答·1744浏览

zrj11

关于光标在哪里，面板就移动到哪里这样写有问题吗？: 没问题; 2017-09-05 1回答·981浏览

风到这里就是粘

想问一下大神，拖拽时直接把fnDown直接赋给鼠标按下的事件，移动时，在fnDown里为什么不可以直接将document.onmousemove=fnMove(event,disX,disY);为什么不行？

嗯，我觉得你应该先弄明白什么是回调函数，element.onclick事件触发的时候，他的回调函数是这种形式的function(event){};虽然JS没有限定参数的长度，也就是说，这个回调函数的形式也是这样的function(event,undefined,undefined........){};所以上面这样子改的话，控制台就会提示你disX没有定义，从而停止这个函数的执行，也就移动不了了。

回调函数是传递参数是没有意义的。所以这时候disX,disY没什么用。

2017-08-09 1回答·1062浏览

Nevermore3182578

老师为什么不用前面封装的事件方法？: 你说的是哪个方法啊?可能为了再演示一遍吧; 2017-07-01 1回答·1087浏览

慕粉4016800

一个classname的小问题: 她这么做是为了防止点击别的选项对这个classname造成污染，跟开启计时器前要先清一样; 2017-05-31 1回答·1104浏览

培根熏肉

江湖救急！！那个给fndown函数里的onmousemove绑的function匿名函数有什么用？

这个和变量有点像。

比如平时都这样写：var num=3；

但它也可写为：

var num;
num=3;

2017-05-19 2回答·1188浏览

OneMagic

为什么在判断最大宽度的时候可以在offsetwidth-10，而在判断最大高度的时候却不能了呢: 因为X是在框的右上方右边当然可以让width-10 但是你上方就不能让height-10了你平行的offsetwidth-10 等于正好把屏幕往左边缩小了10 但是你offsetheight-10是把屏幕从下往上拉了10px 那个X如果在右下方就完全没问题但是在右上方就出现bug了不知道解释清楚了没不懂再问吧; 2017-05-06 1回答·582浏览

BIN_GOD

释放的代码为什么一定要放在fnDown里面: 已采纳 qq_常青的枫叶_03848865 的回答; 没有按下去哪里的的释放之说呢？也就说释放是建立在按钮已经按下的前提下，所以要放在按下的里面; 2017-04-27 1回答·722浏览

慕用9244143

getElementsByTagName('*')报错

又或者parent那里不要加单双引号

var oParent = parent ? document.getElementById(parent) : document

2017-03-30 4回答·624浏览

慕勒9246139

鼠标松开依旧移动: 已采纳白小九的回答; 用addEventListener（或attachEvent）添加的事件，必须用removeEventListener（或detachEvent）移除; 2017-03-03 1回答·893浏览

路过的小白成长ing

点击关闭按钮后如何重新打开: 你可以再写一个块替换面板，点击事件加一个display:block;和display:none;不就行了？; 2017-01-21 1回答·639浏览

旺仔1小馒头

求大神解答

已采纳沃特_奥布莱恩的回答

disx和disy是光标按下时与面板左边缘和上边缘的距离，调用fnMove函数时作为实参传进函数里。

posx和posy是声明fnMove函数时，定义的形参，用来接收传进来的数据。

可以这么理解：posx和posy是新定义的2个变量（名字可以随意起的，和disx、disy相同也行），把disx和disy赋值给posx和posy（等同于这样2句代码：var posx=disx;var posy=disy;）

2017-01-12 1回答·886浏览

该比率

DOM 操作拖拽: 已采纳 Mala丶Suerte 的回答; 后面有讲.; 2016-12-09 3回答·1334浏览

无敌小哥儿

关于event的一个小问题。

已采纳 stone310 的回答

document.onmousemove=fnMove(event,disX,disY);

这么写就是直接调用fnMove这个函数，直接调用的时候，event并不承载在任何事件之上，因此无法正确获取值

2016-11-21 1回答·886浏览

hangerror

求高手看一下这个代码，调试了很久都拖曳不了

已采纳 Himushroom 的回答

// 下面的代码是在你的代码基础上修改的，里面的错误全部标出并改正，可以复制下面的代码在浏览器中测试啦
<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;padding:0;}
        ul{position: absolute;left: 30px;top: 50px;}
        li{list-style: none;margin-top: 5px;}
        /* 这里给login_box设置margin-left和margin-top会影响js中最后设置的style,建议去掉或者优化js中l,t的得数,就不给你优化了,现在可以拖动了,只是这个数字有点问题,自己改一下吧*/
        #login_box{width:300px;height:150px;background:#eee;
            border:1px solid #ccc;position:absolute;left:50%;top:50%;margin-left:-150px;margin-top:-75px;}
        #login_box p{height:20px;border-bottom:1px solid #ccc;font-size:12px;padding:6px 0 0 5px;font-weight:bold;}
        #close{width:14px;height:14px;background:url(http://icon.mobanwang.com/UploadFiles_8971/200805/20080528160815283.png) no-repeat;position:absolute;right:4px;top:6px;}
    </style>
    <script>
        window.onload=drag;
        function drag(){
            var otitle=document.getElementsByTagName('p')[0]; // 直接写getElementsByTagName('p')取出来的otitle是数组
            otitle.onmousedown=fndown;  // 这里调用函数不要在函数名后面写(),否则函数会直接加载
        }
        function fndown(event){
            console.log(11) // 在这里加个console可以看见函数是什么时候调用的
            event=event||window.event;
            var box=document.getElementById("login_box");
            var disX=event.clientX-box.offsetLeft;  //这里clientX写错了,已经帮你改回
            var disY=event.clientY-box.offsetTop;   //这里clientY写错了,已经帮你改回
            document.onmousemove=function(event){
                event=event||window.event;
                fnmove(event,disX,disY);
            }
            document.onmouseup=function(){    //这里之前多了一个括号,已经去掉
                document.onmousemove = null;
                document.onmouseup = null;    //这里建议加上
            }
        }

        function fnmove(event,px,py){
            var box=document.getElementById("login_box");
            var l=event.clientX-px;
            var t=event.clientY-py;
            var clientW=document.documentElement.clientWidth || document.body.clientWidth;
            var clientH=document.documentElement.clientHeight || document.body.clientHeight;
            var maxl=clientW-box.offsetWidth;
            var maxt=clientH-box.offsetHeight;
            if (l<0) {
                l=0;
            } else if(l>maxl) {
                l=maxl;
            }
            if (t<0) {
                t=0;
            }
            else if(t>maxt) {
                t=maxt;
            }
            box.style.left=l+'px';
            box.style.top=t+'px';
        }


    </script>
</head>
<body>

<div id="login_box">
    <p>用户登录</p><span id="close"></span>
    <div>
        <label for="username">用户名&nbsp;<input type="text" name="username" id="username" /></label>
        <label for="password">&nbsp;密码&nbsp;&nbsp;<input type="text" name="password" id="password"></label>
    </div>
</div>
</body>
</html>

2016-11-10 2回答·747浏览

superhuman进化中

出现滚动条了是怎么回事？: 在4-2节有讲到; 2016-11-06 2回答·980浏览

非典型材料IT男

o是什么意思: 已采纳 z丶ethun 的回答; 每个程序员都有自己取标识符的爱好; 2016-10-17 4回答·1187浏览

Niro07

百思不得其解，大神快来: 2016-09-23 2回答·752浏览

_小奕_

为什么我把关闭的函数写在onload外面，就报错了？

已采纳 clownis 的回答

window.onload是一个事件函数，指当页面加载完成后，立即调用的函数。代码中，你将drag这个函数赋值给window.onload，那么当页面加载完成后，就会调用drag函数。

document.getElementById('ui_boxyClose')的作用是从当前DOM树中获取id为ui_boxyClose的元素，DOM树在页面加载完成后才是完整的，也就是说只有写在drag函数里，才能在完整的DOM树中根据id值获取你想要的元素。

如果你将document.getElementById('ui_boxyClose')写在onload函数外面(或者说写在drag函数外面)，此时执行js文件，是有可能获取不到指定id值的元素(取决于js脚本文件在html中的位置)，所以就会报错，不能为一个null空值设置onclick事件函数，即说明没有找到id为ui_boxyClose的元素。

2016-09-02 1回答·983浏览