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

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

1 голос
/ 08 февраля 2012

мне кажется, что весь учебник о перетаскивании 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>

1 Ответ

1 голос
/ 08 февраля 2012

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

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

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

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

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

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

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

...