為什么一個HTML元素的onmouseup事件在拖放過程中不觸發？

Question

在我看來，所有有關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>

Answer 1

當我在 target上下移動鼠標時，它似乎對我有用，這是代碼的“ jsfiddle”，以及目標周圍的黑色邊框： http : //jsfiddle.net/prsYk/

但是，當我按下鼠標並將鼠標“拖動”到目標區域之外，然后再向上拖動鼠標時，不會觸發任何事件。 我想說這與鼠標向上移動時鼠標不再位於目標區域中的事實有關。

這個小提琴： http : //jsfiddle.net/V4HPw/顯示，當您將事件附加到document對象時，兩個事件仍然會觸發，您當前正在將它們附加到t目標（帶有黑色邊框的元素）上。

如果實現了實際的拖動操作，則該元素在移動鼠標時會改變其位置，因此釋放鼠標時會觸發onmouseup事件，因為您仍在目標區域內。

但是，與其重新發明輪子，不如說一個Javascript庫可能有助於消除實現實際拖放功能的痛苦：

YUI DragDrop模塊
jQuery可拖動

上述兩個庫還將為您提供方便的方法來操作DOM元素，以及更多其他功能-正如我注意到您的“待辦事項”說明以了解“獲取元素”一樣。

希望有幫助！

為什么一個HTML元素的onmouseup事件在拖放過程中不觸發？

問題描述

1 個解決方案

解決方案1
1 已采納 2012-02-08 03:18:36

為什么一個HTML元素的onmouseup事件在拖放過程中不觸發？

問題描述

1 個解決方案

解決方案1 1 已采納 2012-02-08 03:18:36

解決方案1
1 已采納 2012-02-08 03:18:36