Как мне обработать эти события и почему мой код не работает?

Question

Мне нужно сделать следующее. Как только пользователь нажимает на элемент div, я хочу сохранить координаты мыши, пока пользователь перемещает курсор над элементом div и удерживает левую кнопку мыши. Когда пользователь покидает div или отпускает левую кнопку, я хочу прекратить запись координат. У меня есть следующий код:

$(document).ready(function() {
            var coordhdl = new coordinateHandler();
            $("#test").mousedown(function(e) {

                $("#test").mousemove(function(ee) {

                    $("#test").mouseup(function(e) {
                        stopIt = true;
                    });
                    if(stopIt == false)
                    {
                        coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
                    }


                });

            }); 


        });

Проблемы с этим кодом: Он записывает координаты, даже когда пользователь только щелкнул по элементу div, не нажимая левую кнопку. Он не прекращает записывать координаты после щелчка.

Я новичок в javascript / jquery, поэтому не очень разбираюсь в этом. Спасибо за вашу помощь.

Answer 1

Нечто подобное должно работать.Он устанавливает флаг в true / false, когда мышь нажимается / отпускается соответственно.Когда мышь перемещается, если установлен флаг, добавляются координаты:

$(document).ready(function() {
    var isDown = false,
        coordhdl = new coordinateHandler();
    $("#test").mousedown(function() {
       isDown = true;
    }).mouseup(function() {
       isDown = false;  
    }).mousemove(function(e) {
        if(isDown) {
            coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
        }
    });
});

Вот демо чего-то похожего в действии (оно просто записывает координаты в pэлемент вместо использования coordinateHandler объекта).

Answer 2

Каждый раз, когда происходит событие mousedown, вы добавляете обработчик mousemove, и каждый раз, когда мышь перемещается, вы добавляете еще один обработчик mouseup. Я не вижу, где объявлена ​​переменная stopIt, поэтому область действия этой переменной также может быть проблемой. Вам не нужно вкладывать обработчики, поэтому попробуйте это так.

$(document).ready(function() {
        var coordhdl = new coordinateHandler();
        var isRecording = false;
        $("#test").mousedown(function(e) { isRecording = true })
                  .mouseup(function(e) { isRecording = false })
                  .mousemove(function(ee) {
                     if(isRecording)
                     {
                         coordhdl.addCords(ee.pageX - this.offsetLeft, ee.pageY - this.offsetTop);
                     }
                  });
    });

Answer 3

Не присоединяйте обработчики событий внутри обработчиков событий. На каждое движение мыши вы прикрепляете новый обработчик событий mouseup. Они не переопределяются, они добавляются.

Вместо этого используйте «глобальный» флаг:

$(document).ready(function() {
    var coordhdl = new coordinateHandler(),
        recording = false;

    $("#test").mousedown(function(e) {
        recording = true;
    }).mousemove(function(e) {
        if(recording) {
            coordhdl.addCords(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
        }
    }).mouseup(function(e) {
        recording = false;
    });
});