JavaScript具有模拟用户互动的方法，例如.click（）、. focus（）、. blur（）。但是没有.hover（）。JS可以模拟悬停/鼠标悬停吗？

Question

Javascript可以模拟用户交互。

任何脚本可以像模拟用户交互click或focus在网页上的特定元件上，通过使用方法.click()和.focus()。

例：

const square = document.getElementsByClassName('square')[0];

const clickSquare = () => {

  event.target.dataset.receivedAction = 'click';
  event.target.innerHTML = '<p>I\'ve been clicked!</p>';
}

const clearSquare = () => {

  square.removeAttribute('data-received-action');
  square.innerHTML = '';
}

square.addEventListener('click', clickSquare, false);

const clickButton = document.querySelector('[data-deliver-action="click"]');
const clearButton = document.querySelector('[data-deliver-action="clear"]');

clickButton.addEventListener('click', () => square.click(), false);
clearButton.addEventListener('click', clearSquare, false);

.square {
display: block;
width: 120px;
height: 120px;
margin: 12px 6px;
text-align: center;
font-family: arial, helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}

button {
display: block;
width: 160px;
margin: 6px;
cursor: pointer;
}

.square {
color: rgb(255, 0, 0);
background-color: rgb(255, 0, 0);
}

.square[data-received-action="click"] {
background-color: rgb(255, 255, 0);
}

<div class="square" tabindex="0"></div>

<button type="button" data-deliver-action="click">Click the Square</button>
<button type="button" data-deliver-action="clear">Clear Square</button>

上方的方块侦听一个click event。我们可以直接单击正方形，也可以按“ 单击正方形”按钮，然后通过.click()方法单击正方形本身。

任何一种动作都会导致方块接收click事件。

但这仅是可能的，因为该.click()方法存在。

甲.hover()（或甚至.mouseover()）方法也将是有用的，但它不存在。

如果没有这些方法，是否可以通过计算来模拟悬停/鼠标悬停？

Answer 1

这似乎不是整个网络广泛记载，但它是可以计算模拟人以上，所述相同的方式的元件移动鼠标指针element.click()模拟一个元件上的人的点击。

正确的方法是使用：

eventTarget.dispatchEvent(event)

在组合与JS-本地event。

大多数引用dispatchEvent()包括自定义编写的事件，但重申一下，它是可以使用JS原生 event -在这种情况下mouseover。

因此...利用以下.click()方法代替以下方法：

clickButton.addEventListener('click', () => square.click(), false);

我们可以部署：

clickButton.addEventListener('click', () => {

  let hover = new Event('mouseover');
  square.dispatchEvent(hover);

}, false);

工作示例：

eventTarget.dispatchEvent(event)

clickButton.addEventListener('click', () => square.click(), false);

clickButton.addEventListener('click', () => {

  let hover = new Event('mouseover');
  square.dispatchEvent(hover);

}, false);