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

你没有将ev传递给函数prepare_pic_move，试试这种方式

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

P.S。我认为您不需要将img作为参数传递，而ClientX不是跨浏览器。

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

Answer 2

您不需要传递参数img，因为您可以通过ev.srcElement获取它。所以你的两个方法只需要一个参数。事实上，如果你使用img.onclick = prepare_pic_move连接你的onclick事件，你在第一个方法中命名img的论点实际上就是你的ev;然后用你需要的ev对象调用它作为第一个参数（你可以从img重命名为ev）

Answer 3

prepare_pic_move应该返回一个事件处理程序。它目前正在返回undefined。

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

onmousemove使用2个参数

3 个答案: