Как получить координаты клика пользователя с помощью addEventListener, а затем повторить этот щелчок с помощью elementFromPoint (). Click ()? - PullRequest
1 голос
/ 18 марта 2020

Как получить координаты клика пользователя, а затем повторить этот клик сразу после или через секунду?

Когда я использую код, указанный ниже, 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" после первоначального щелчка. Почему это?

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

var xclick
 var yclick
 myPost.addEventListener("click", e => {


   if (xclick === undefined) {
     xclick = e.clientX;
     yclick = e.clientY;
   }


   console.log(xclick, yclick);
   //  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>

Насколько я понимаю, при каждом событии щелчка ваши переменные переустанавливались. Если оставить их вне функции и обновить их, только если они не undefined, вы получите желаемый результат

0 голосов
/ 19 марта 2020

Насколько я понимаю, нужно сохранить координаты:

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...