почему событие onmouseup одного элемента html не срабатывает во время перетаскивания?

мне кажется, что все учебники по перетаскиванию html устанавливают события onmousedown и onmouseup для документа, а не для самого элемента, и, как я тестировал с приведенными ниже кодами, при нажатии на элемент будет запущено событие onmousedown и onmouseup, но при попытке перетащить элемент в другое место событие onmouseup не запускается,

Я использую приведенные ниже коды, мой вопрос: почему onmouseup не запускается при перетаскивании? Я использую фаерфокс 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>

javascript html drag-and-drop onmouseup
person hetaoblog    schedule 08.02.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Кажется, это работает для меня, когда я перемещаю мышь вверх и вниз внутри target, вот "jsfiddle" с вашим кодом плюс черная рамка вокруг цели: http://jsfiddle.net/prsYk/

Однако, когда я опускаю мышь и «перетаскиваю» ее за пределы целевой области, а затем поднимаю мышь, событие не запускается. Я бы сказал, что это связано с тем фактом, что мышь больше не находится в области цели, когда вы наводите ее.

Эта скрипка: http://jsfiddle.net/V4HPw/ показывает, что оба события по-прежнему срабатывают, когда вы прикрепляете события к объекту document, вы в настоящее время прикрепляете их к своей цели t, которая является элементом с черной рамкой.

Если вы реализуете фактическое перетаскивание, когда элемент меняет свое положение при перемещении мыши, тогда событие onmouseup должно срабатывать, когда вы отпускаете, потому что вы все еще находитесь в целевой области.

Однако вместо того, чтобы заново изобретать колесо, возможно, библиотека Javascript может помочь избавиться от боли, связанной с реализацией фактической функциональности перетаскивания:

Обе вышеупомянутые библиотеки также предоставят вам удобные методы для манипулирования элементами DOM и многое другое — как я заметил в вашей заметке «todo», чтобы узнать о «получении элементов».

Надеюсь, это поможет!

person danjah    schedule 08.02.2012
comment
Если вы не заинтересованы в использовании библиотек JS, я очень быстро собрал это: jsfiddle.net/m3PNV - person danjah; 08.02.2012
comment
Большое спасибо, так что это означает, что при перетаскивании элемента, даже если он выглядит так, как будто он был перетащен в другое место, а мышь все еще находится в регионе, на самом деле div не был изменен в дереве dom (таким образом, регион не изменен), поэтому событие onmouseup не будет запущено, если оно относится к элементу, а не к документу; это правильно? Спасибо. - person hetaoblog; 08.02.2012
comment
если событие mouseup привязано к элементу, но ваша мышь находится за пределами области элемента - она ​​не сработает, исправьте. Однако прикрепление mouseup к документу захватит его независимо от того, где вы наводите мышь. Выбор за вами, к которому вы прикрепляете событие mouseup, в зависимости от вашей ситуации могут быть преимущества использования документа или целевого элемента для всех прикреплений событий. - person danjah; 09.02.2012