将jQuery函数代码转换为javascript

下面是我使用的jQuery函数

$（.top1”）.onmousedown（函数（e）{
e、 预防默认值（）；
如果（如换档键）{
$（文件）
.bind（'mousemove.rotateImg'，函数（e）{
旋转鼠标（e，$（'.top'））；
});
}
});

我试图将其转换为普通JavaScript函数。我尝试了以下方法

document.querySelector(".top1").addEventListener("mousedown", function(e) {

      e.preventDefault(); // prevents the dragging of the image.
      if (e.shiftKey) {
        console.log('dfs')
        // document
        //     .bind('mousemove.rotateImg', function (e) {
        //         rotateOnMouse(e, $('.top'));
        //     })
      }

---

请尝试此代码，我已将其更新

如果使用了类，则必须对其进行迭代，否则对单个事件使用id

var top1 = document.querySelector("top1");
var rotateImg = document.querySelector("rotateImg");

for (i = 0; i < top1.length; i++) {
    top1[i].addEventListener("mousedown", function (e) {
        e.preventDefault();
        if (e.shiftKey) {
            for (j = 0; j < rotateImg.length; j++) {
                rotateImg[j].addEventListener("mousemove", function (e) {
                    rotateOnMouse(e, top1[i]);
                });
            }
        }
    });
}

---

var top1=document.querySelector（“top1”）；
var rotateImg=document.querySelector（“rotateImg”）；
对于（i=0；i

什么不起作用？你正在使用的html在哪里？预期的行为是什么？我在下面评论的部分中遇到错误。。。document.bind（）部分也不在事件句柄中添加事件处理程序。那么，为什么要将该代码转换为纯JS？

getElementsByClassName

返回HTMLCollection。您不能调用

AddEventSitener

。

var top1=document.querySelector（“.top1”）感谢@mplungjan纠正我的错误。：）但是你没有给予足够的关注。您需要点
querySelector
只返回找到的第一个元素。在上调用
addEventLsitener
与在上调用
$（“选择器”）不同
getElementsByClassName
可以工作，但必须迭代所有结果。