onmousemove, используя 2 параметра

Question

У меня, наверное, довольно простой вопрос. Я генерирую некоторые изображения, используя JavaScript. когда я нажимаю на такое изображение и перемещаю курсор, изображение должно следовать, пока я не нажму снова. Это мое решение:

Я создаю img и подключаю его с помощью обработчика события onclick:

img.onclick = prepare_pic_move(img);

Этот тип обработчика запускает обработчик "onmousemove":

  function prepare_pic_move(img) {
img.onmousemove = pic_move(ev, img);
  }

Эта функция должна наконец переместить картинку:

  function pic_move(ev, img) {
    img.style.left = ev.ClientX;
    img.style.top = ev.ClientY;
  }

Это не работает, и консоль ошибок Firefox сообщает, что ev не определено. Я думаю, проблема в том, что мне нужно использовать два параметра в функции pic_move.

Answer 1

Вам не нужно передавать аргумент img, поскольку вы можете получить его через ev.srcElement.Таким образом, оба ваших метода нуждаются только в одном аргументе.Фактически, аргумент, который вы назвали img в своем первом методе, на самом деле ваш ev, если вы связываете событие onclick с помощью img.onclick = prepare_pic_move;Затем он будет вызываться с нужным вам объектом ev в качестве первого аргумента (который можно переименовать из img в ev)

Answer 2

Вы не передали ev в функцию prepare_pic_move, попробуйте этот способ

img.onclick = function (ev) { prepare_pic_move(ev, img); };

PS Я не думаю, что вам нужно передавать img в качестве параметра, а ClientX не является кросс-браузерным.

img.onclick = function (ev) {
    img.style.left = ev.ClientX;
    img.style.top = ev.ClientY;
};

Answer 3

prepare_pic_move должен возвращать обработчик события. В настоящее время он возвращает undefined вместо.

function prepare_pic_move(img) {
    return function(evt){
        img.onmousemove = pic_move(ev, img);
    };
}