Форум

vanoha · #1 (**permalink**) 15.11.2014, 15:23

Доброго времени суток, может кто из умнейших знатаков подскажет почему у меня не получается. Задача такая: нужно показывать координаты пока зажата клавиша мыши. Что я делая ни так? После того как я отпуская кнопку, он продолжает показывать координаты.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(e) {
jQuery("#blo").mousedown(function(e){
		jQuery("#blo").mousemove(function(e){
		X = e.pageX-jQuery(this).offset().left;
		Y = e.pageY-jQuery(this).offset().top;
		jQuery("#kor").html("x="+X+"y="+Y);
	})
}).mouseup(function(){jQuery("#kor").html("");});
});
</script>
<div id="blo" style="width:500px; height:500px; background-color:#093;"></div>
<div id="kor" ></div>

рони · #2 (**permalink**) 15.11.2014, 15:33

vanoha,
по mousedown устанавливают флаг только что показ возможен и всё -- mouseup снимают флаг -- в mousemove
проверяют и показывают данные взависимости от флага

либо функции вывода дают имя и по mouseup делают off('mousemove' ,'#blo' , 'имя')

vanoha · #3 (**permalink**) 15.11.2014, 15:37

Ничего не понял. Можно на примере?

рони · #4 (**permalink**) 15.11.2014, 18:05

vanoha, вариант с флагом

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        jQuery(function() {
            var flag = false;
            jQuery("#blo").mousemove(function(e) {

                X = e.pageX - jQuery(this).offset().left;
                Y = e.pageY - jQuery(this).offset().top;
                jQuery("#kor").html(flag ? "x=" + X + "y=" + Y : "");
            })
            jQuery("#blo").mousedown(function(e) {
                flag = true

            }).mouseup(function() {
                flag = false
            });

        });
    </script>
</head>

<body>
    <div id="blo" style="width:500px; height:500px; background-color:#093;"></div>
    <div id="kor"></div>
</body>

</html>

рони · #5 (**permalink**) 15.11.2014, 18:17

vanoha,
вариант с off

<!DOCTYPE HTML>

<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script>
        jQuery(function() {
            var flag = function(e) {
                X = e.pageX - jQuery(this).offset().left;
                Y = e.pageY - jQuery(this).offset().top;
                jQuery("#kor").html("x=" + X + "y=" + Y);
            },
            blo = jQuery("#blo");
            blo.mousedown(function(e) {
                blo.on({
                    'mousemove': flag
                })

            }).mouseup(function(e) {
                jQuery("#kor").html("");
                blo.off({
                    'mousemove': flag
                })
            });

        });
    </script>
</head>

<body>
    <div id="blo" style="width:500px; height:500px; background-color:#093;"></div>
    <div id="kor"></div>
</body>

</html>

vanoha · #6 (**permalink**) 15.11.2014, 19:03

Спасибо огромное, всё получилось. Только я пробовал сделать что то типа первого варианта у меня не выходила переменная из функции... Я задавал не false-true, а 1-0. но почему то в переменную не попадало, а тут всё работает... Пробовал ещё 1-0 вставлять в атрибут а затем проверять значение атрибута, была та же фигня. А за эти скрипты спасибо, всё работает, буду разбираться что я делал не правильно...

Форум

Справочник

Discord чат

Курсы javascript