1

在我看来，所有关于 html 拖放的教程都将 onmousedown 和 onmouseup 事件设置为文档而不是元素本身，并且正如我用下面的代码测试的那样，当单击元素时，onmousedown 和 onmouseup 事件都会被触发，但是当尝试将元素拖放到另一个地方时，不会触发 onmouseup 事件，

我使用下面的代码，我的问题是：为什么拖动时不会触发 onmouseup？我使用 Firefox 8.0.1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Border</title>

<style type="text/css">
body{
background-color: gray;
}

#page{
margin: 20px auto;
width:800px;
height:639px;
/*background-image: url("./img/board.jpg");*/
background-image: url("https://www.google.com/logos/2012/dickens-2012-HP.jpg");
background-repeat:  no-repeat;

}

#target{
position: relative;
top: 10px;
left: 20px;
/*background-image: url("./img/target.jpg");*/
background-image: url("https://www.google.com/images/icons/product/chrome-48.png");
background-repeat:  no-repeat;
width: 145px;
height:117px;

}

</style>

<script type="text/javascript">

function mylog(msg)
{
    if(window.console && console.log){
        console.log(msg);
    }
}



window.onload = function(){ 
    initdragdrop();

}

/* 
todo: learn how to make a getObject()
function getObject(id){
    var t = document.getElementById(id);

    this.x = t.left;
    this.y = t.top;
}
 */

function initdragdrop(){    
    var t = document.getElementById('target');


    t.onmousedown = function(){

        this.status = 'down';
        mylog(this.status);

    }


    t.onmouseup = function(){
        this.status = 'up';

        mylog(this.status);
    }

}

</script>

</head>
<body>

<div id="page">


<div id="target">

</div>

</div>


</body>
</html>
4

1 回答 1

1

当我在中上下鼠标时，它似乎对我target有用，这是一个带有您的代码的“jsfiddle”，以及目标周围的黑色边框：http: //jsfiddle.net/prsYk/

但是，当我按下鼠标并将鼠标“拖动”到目标区域之外，然后鼠标向上时 - 不会触发任何事件。我会说这与鼠标向上时鼠标不再位于目标区域的事实有关。

这个小提琴： http: //jsfiddle.net/V4HPw/表明，当您将事件附加到document对象时，这两个事件仍然会触发，您当前正在将它们附加到您的t目标，即带有黑色边框的元素。

如果你实现了实际的拖动，当你移动鼠标时元素会改变它的位置，那么onmouseup当你释放时应该触发事件，因为你仍然在目标的区域内。

不过，与其重新发明轮子，也许一个 Javascript 库可能有助于消除实现实际拖放功能的痛苦：

上述两个库还将为您提供操作 DOM 元素的便捷方法，等等 - 因为我注意到您的“待办事项”注释以了解“获取元素”。

希望有帮助！

于 2012-02-08T03:18:36.583 回答