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-native event - 在这种情况下 mouseover.

所以...而不是以下，利用 .click() 方法：

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

我们可以部署：

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

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

}, false);

工作示例：

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

const clickSquare = () => {

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

const hoverSquare = () => {

  event.target.dataset.receivedAction = 'hover';
  event.target.innerHTML = '<p>I\'ve been hovered over!</p>';
}

const clearSquare = () => {

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

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

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

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

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

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

}, 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);
}

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

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

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

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

Javascript has methods to simulate user interactions like .click(), .focus(), .blur(). But no .hover(). Can JS simulate a hover / mouseover?

javascript

dom-events

event-driven

event-driven-design