如何使用JavaScript模拟鼠标单击以及鼠标移动

Question

我正在使用js文件中的element.click（）对鼠标单击操作进行仿真，但是鼠标光标位于其他位置，并且在正确的元素上执行操作，我想在执行模拟鼠标单击时将鼠标光标放在元素上。知道使用JavaScript代码，我怎么能得到这个？

Answer 1

您无法在浏览器中更改鼠标光标的位置。 看到这个。

但是您可以使用javascript click()方法来模拟click事件。 为此，您必须使用elementFromPoint()选择单击位置。 在我的底部示例中，当您单击第一个按钮时，javascript模拟了第二个按钮的单击。

 var first = document.getElementById("first"); var second = document.getElementById("second"); first.addEventListener("click", function(){ var xPos = second.offsetLeft; var yPos = second.offsetHeight; document.elementFromPoint(xPos, yPos).click(); }); second.addEventListener("click", function(){ alert("Second button clicked!"); });

 <button id="first">First</button> <button id="second">Second</button>

Answer 2

您不能使用javascript移动鼠标指针，因为它会带来安全隐患。

Answer 3

正如其他答案中已经指出的那样，您无法使用JavaScript更改鼠标的真实位置...但是...您需要这样做吗？ 没有！

您可以添加鼠标光标的图像，并将其放置在相对于左上方浏览器窗口的内容顶部所需的任何位置。 您可以通过应用CSS'cursor：none;'隐藏真实的光标。 类到您希望光标消失的屏幕区域。

因此，要模拟您想要的内容，您可以获取要单击的元素的位置，隐藏真实的鼠标光标，显示假鼠标光标，然后将其移动到要单击的元素的位置，然后单击它。

为了使其易于使用：请在启动模拟时通知用户不再移动鼠标，模拟鼠标移动并单击，当用户移动鼠标时隐藏假鼠标并显示真实鼠标，并通知用户模拟结束。

Answer 4

我找到了一个模拟鼠标拖动事件的git存储库：

链接到git-repository
请参阅CODEPEN示例
有用的文章

的HTML

<!--
    author: kemokid
    github: https://github.com/kemokid/scripting-sortable/blob/master/script_sortable_dnd_more_general.js
-->
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/ -->
        <p>Drag the W3Schools image into the rectangle:</p>
        <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

    <br>

        <img id="drag1" src="https://www.w3schools.com/html/img_logo.gif" ondragstart="drag(event)" >

    <br/>

        <button onClick="autodrag();">Auto-drag</button>

    <br/>
    <br/>

        Reload the page to reset the image.

    <script src="app.js"></script>
</body>
</html>

的CSS

/*
    author: kemokid
    github: https://github.com/kemokid/scripting-sortable/blob/master/script_sortable_dnd_more_general.js
*/
#div1 {
    width: 350px;
    height: 70px;
    padding: 10px;
    border: 1px solid #aaaaaa;
}

#drag1 {
    width: 336px;
    height: 69px;
}

JS

/*
    author: kemokid
    github: https://github.com/kemokid/scripting-sortable/blob/master/script_sortable_dnd_more_general.js
*/

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var id = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(id));
}

function autodrag() {
    return triggerDragAndDrop('#drag1', '#div1');
}

// Originally from https://ghostinspector.com/blog/simulate-drag-and-drop-javascript-casperjs/
// trimmed down and modified by @kemokid (Martin Baker) to work with Sortable.js
///
// Probably not going to work with dragging from one list to another

// This has been made more general, to work with other drag-and-drop elements besides a
// Sortable list, but is not as complete as the Casper example above.

// Call with DOM selectors, eg `triggerDragAndDrop('#drag', '#drop');`

// Returns false if unable to start.
// callback, if present, will be called with true if able to finish, false if not.
// If you receive "false" on the callback, the list is likely not in the beginning state.
var triggerDragAndDrop = function (selectorDrag, selectorDrop, callback) {
  var DELAY_INTERVAL_MS = 10;
  var MAX_TRIES = 10;
  var dragStartEvent;

  // fetch target elements
  var elemDrag = document.querySelector(selectorDrag);
  var elemDrop = document.querySelector(selectorDrop);

  if (!elemDrag || !elemDrop) {
    console.log("can't get elements");
    return false;
  }

  var startingDropRect = elemDrop.getBoundingClientRect();

  function rectsEqual(r1, r2) {
    return r1.top === r2.top && r1.right === r2.right && r1.bottom === r2.bottom && r1.left === r2.left;
  }

  // function for triggering mouse events
  function fireMouseEvent(type, elem, dataTransfer) {
    var evt = document.createEvent('MouseEvents');
    evt.initMouseEvent(type, true, true, window, 1, 1, 1, 0, 0, false, false, false, false, 0, elem);
    if (/^dr/i.test(type)) {
      evt.dataTransfer = dataTransfer || createNewDataTransfer();
    }

    elem.dispatchEvent(evt);
    return evt;
  };

  function createNewDataTransfer() {
    var data = {};
    return {
      clearData: function(key) {
        if (key === undefined) {
          data = {};
        } else {
          delete data[key];
        }
      },
      getData: function(key) {
        return data[key];
      },
      setData: function(key, value) {
        data[key] = value;
      },
      setDragImage: function() {},
      dropEffect: 'none',
      files: [],
      items: [],
      types: [],
      // also effectAllowed      
    }
  };

  // trigger dragging process on top of drop target
  // We sometimes need to do this multiple times due to the vagaries of
  // how Sortable manages the list re-arrangement
  var counter = 0;
  function dragover() {
    counter++;
    console.log('DRAGOVER #' + counter);

    var currentDropRect = elemDrop.getBoundingClientRect();
    if (rectsEqual(startingDropRect, currentDropRect) && counter < MAX_TRIES) {
      if (counter != 1) console.log("drop target rect hasn't changed, trying again");

      // mouseover / mouseout etc events not necessary
      // dragenter / dragleave events not necessary either
      fireMouseEvent('dragover', elemDrop, dragStartEvent.dataTransfer);

      setTimeout(dragover, DELAY_INTERVAL_MS);
    } else {
      if (rectsEqual(startingDropRect, currentDropRect)) {
        console.log("wasn't able to budge drop target after " + MAX_TRIES + " tries, aborting");
        fireMouseEvent('drop', elemDrop, dragStartEvent.dataTransfer);
        if (callback) callback(false);
      } else {
        setTimeout(drop, DELAY_INTERVAL_MS);
      }
    }
  }

  function drop() {
    console.log('DROP');
    // release dragged element on top of drop target
    fireMouseEvent('drop', elemDrop, dragStartEvent.dataTransfer);
    fireMouseEvent('mouseup', elemDrop);    // not strictly necessary but I like the symmetry
    if (callback) callback(true);
  }

  // start dragging process
  console.log('DRAGSTART');
  fireMouseEvent('mousedown', elemDrag);
  dragStartEvent = fireMouseEvent('dragstart', elemDrag);

  // after a delay, do the first dragover; this will run up to MAX_TRIES times
  // (with a delay between each run) and finally run drop() with a delay:
  setTimeout(dragover, DELAY_INTERVAL_MS);
  return true;
};

如何使用JavaScript模拟鼠标单击以及鼠标移动

问题描述

4 个解决方案

解决方案1
2 2016-05-11 06:43:44

解决方案2
1 已采纳 2016-05-11 06:10:24

解决方案3
1 2018-09-27 08:20:15

解决方案4
0 2019-03-06 19:01:59

如何使用JavaScript模拟鼠标单击以及鼠标移动

问题描述

4 个解决方案

解决方案1 2 2016-05-11 06:43:44

解决方案2 1 已采纳 2016-05-11 06:10:24

解决方案3 1 2018-09-27 08:20:15

解决方案4 0 2019-03-06 19:01:59

解决方案1
2 2016-05-11 06:43:44

解决方案2
1 已采纳 2016-05-11 06:10:24

解决方案3
1 2018-09-27 08:20:15

解决方案4
0 2019-03-06 19:01:59