Question

这是浮动窗口的示例。我知道点击鼠标拖动文件功能被调用。请解释两个div的目的是什么，并且在拖动函数中使用uphandler和movehandler被拖动的函数使用。请解释这些函数的确切功能，以及这些函数中的e和px符号是什么？

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250"> 
<title>Floating Window</title> 
<script src="Drag.js"></script> 
</head> 
<body> 

<div id="window" style="position:absolute; z-index:10; left:350px; top:160px; width:400px;background-color:#dde3eb; border:1px solid #464f5a;"> 

   <div style="padding-bottom:8px; width:400px; background-color:#718191; border-bottom:1px solid #464f5a;" onMouseDown="beginDrag(this.parentNode, event);"> 

      <div style="position:absolute; top:2px; left:5px; font-size:16px; font-weight:bold; color:#FFFFFF;">Drag me!</div> 

      <div style="position:absolute; top:3px; left:377px; float:right;" onClick="this.parentNode.parentNode.style.display = 'none"> 



      </div> 

   </div> 
<br/> 
   <div style="margin-left:20px;">your content here...</div> 

   <div style="margin-left:30px;">your content here...</div> 

   <div style="margin-left:40px;">your content here...</div> 
<br/> 

</div> 



</body> 

function beginDrag(elementToDrag, event){
    var deltaX = event.clientX - parseInt(elementToDrag.style.left);
    var deltaY = event.clientY - parseInt(elementToDrag.style.top);
    if (document.addEventListener){
        document.addEventListener("mousemove", moveHandler, true);
        document.addEventListener("mouseup", upHandler, true);
    }
    else if (document.attachEvent){
        document.attachEvent("onmousemove", moveHandler);
        document.attachEvent("onmouseup", upHandler);
    }
    else {
        var oldmovehandler = document.onmousemove;
        var olduphandler = document.onmouseup;
        document.onmousemove = moveHandler;
        document.onmouseup = upHandler;
    }
    if (event.stopPropagation) event.stopPropagation();
    else event.cancelBubble = true;
    if (event.preventDefault) event.preventDefault();
    else event.returnValue = false;
    function moveHandler(e){
        if (!e) e = window.event;
        elementToDrag.style.left = (e.clientX - deltaX) + "px";
        elementToDrag.style.top = (e.clientY - deltaY) + "px";
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;
    }
    function upHandler(e){
        if (!e) e = window.event;
        if (document.removeEventListener){
            document.removeEventListener("mouseup", upHandler, true);
            document.removeEventListener("mousemove", moveHandler, true);
        }
        else if (document.detachEvent){
            document.detachEvent("onmouseup", upHandler);
            document.detachEvent("onmousemove", moveHandler);
        }
        else {
            document.onmouseup = olduphandler;
            document.onmousemove = oldmovehandler;
        }
        if (e.stopPropagation) e.stopPropagation();
        else e.cancelBubble = true;
    }
}

Answer 1

我是JavaScript的新手，但已经做了很多其他的编程语言，所以如果我出错了，请不要打击我

2个div：它只是HTML元素之一，它用于分类您当前正在处理的HTML部分

uphandler：是你在HTML主体下声明的自定义函数，我不太确定函数是做什么的

与'moveHandler'功能相同，从外观上看，moveHandler函数可以修改样式上的东西

希望'帮助

请解释一些javascript代码

1 个答案: