监听鼠标操作

手机端监听touchstart事件

let mouse = document.querySelector("#mouse")
  mouse.addEventListener("touchstart", function (e) {
    console.log("监听触摸事件", e.target)
    console.log(e.touches)
    //最多可以有10个触摸对象，每个对象可以获取其clientX\pageX\screenX
    let t0 = e.touches[0]
    console.log("在当前元素中坐标", t0.clientX, t0.clientY)
    console.log("在当前屏幕中坐标", t0.screenX, t0.screenY)
    console.log("在当前文档中坐标", t0.pageX, t0.pageY)

  })

电脑端监听鼠标移动操作

let mouse = document.querySelector("#mouse")
mouse.addEventListener("mousemove", function (e) {
    console.log("监听鼠标事件", e.target)
    console.log("在当前元素中坐标", e.clientX, e.clientY)
    console.log("在当前屏幕中坐标", e.screenX, e.screenY)
    console.log("在当前文档中坐标", e.pageX, e.pageY)
    let img = document.querySelector("#img")
    img.style.top = e.clientY - 10 + "px";
    img.style.left = e.clientX - 10 + "px";
  })