javascript - 如何使用 addEventListener 获取用户点击坐标,然后使用 elementFromPoint().click() 重复该点击?

标签 javascript dom

如何获取用户点击的坐标,然后立即或一秒后重复该点击?

当我使用下面的代码时,第二行的 console.log 被打印多次,但第二次单击的预期效果不起作用。但是,当我将数字放入 elementFromPoint 时,它会起作用,如 document.elementFromPoint(11, 54).click();

    myPost.addEventListener("click", e => {
      console.log(e.clientX, e.clientY);

      var xclick = e.clientX;
      var yclick = e.clientY;
      

      document.elementFromPoint(11, 54).click(); //This works

      document.elementFromPoint(e.clientX, e.clientY).click(); //These don't work
      document.elementFromPoint(xclick, yclick).click(); //These don't work


      //These don't work
      setTimeout(function() {
         // document.elementFromPoint(e.clientX, e.clientY).click();
         document.elementFromPoint(xclick, yclick).click();
       }, 1000);

    });
    
    
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  
  <div id="myPost">Click me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click me</div>
  

</body>
</html>

编辑:在初次单击后,记录的鼠标坐标似乎变为“0 0”。这是为什么?

最佳答案

据我了解,您需要保留坐标:

const myPost = document.querySelector('p');
let t;
myPost.addEventListener("click", e => {
  console.log(e.clientX, e.clientY);

  const newClick = document.createEvent('MouseEvents');
  newClick.initMouseEvent('click', !0, !0, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, !1, !1, !1, !1, 0, null);
  
  clearTimeout(t);
  t = setTimeout(function() {
    document.elementFromPoint(e.clientX, e.clientY).dispatchEvent(newClick);
  }, 1000);
});
<p>click me</p>

关于javascript - 如何使用 addEventListener 获取用户点击坐标,然后使用 elementFromPoint().click() 重复该点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60747355/

相关文章:

javascript - Socket.io 仅针对发射器发出事件

python - 来自 minidom getElementsByTagName 的元素顺序

php - 查找包含域的 href 的特定 getElementsByTagName ('a' )

javascript - Chrome 标签卡住和 SetTimeout/Web Workers

javascript - Angular foreach - 空值

javascript - Document.querySelector 返回 null 直到使用 DevTools 检查元素

javascript - 为什么这个函数不返回 css 规则?

javascript - 无需滚动页面即可更改 location.hash

javascript - GWT 是否优化嵌入式 javascript?

javascript - 无法创建由继承自多个类的类组成的 AngularJS 服务