Question

我正在寻找一种方法来将事件从一个元素触发/“重定向”到另一个元素。如何做到这一点还是可能做到的？要明确：我不正在寻找直接调用事件函数的方法，而是希望浏览器自己执行它所有的UI后效，如果直接发生鼠标事件通常会发生这种情况在实际元素上。与复选框的<label>元素的行为类似。

示例：我有一个带有:hover CSS伪类的DIV，我有第二个DIV。两个DIV都不是嵌套的。如果鼠标悬停在第二个DIV上，我希望浏览器的行为就像鼠标悬停在第一个DIV上一样，因此它会为第一个DIV加载:hover CSS伪类。但我不想为它创建一个明确的CSS名称 - 我希望浏览器使用:hover和其他CSS伪类。

示例

CSS

#div1 {
    background: green;
}

#div1:hover {
    background: red;
}

#div2 {
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: 0;
    right: 0;
    background: blue;
}

HTML

<div id="div1">Hello</div>
<div id="div2">world</div>

请不要jQuery。只有普通的JavaScript。

编辑：使用dispatchEvent不会触发UI（CSS伪类，如:hover）。示例（抱歉一行）：

<div id="div2" onmouseover="var e=document.getElementById('div1'); var evt = new MouseEvent('mouseover', {'view': window,'bubbles': true,'cancelable': true}); e.dispatchEvent(evt);">world</div>

Answer 1

现在我非常确定你想用JavaScript发送一个事件。

非常简单。您可以使用此方法调度事件。

cakeService.updateCakeOrderStatusAndPrice

其中elem是目标元素。

您可以查看Best way to select random rows PostgreSQL。

这是我从Mozilla文档中复制的代码段。它发送elem.dispatchEvent(event);事件。

MouseClick

这适用于MouseOver事件。

function simulateClick() {
  var event = new MouseEvent('click', {
    'view': window,
    'bubbles': true,
    'cancelable': true
  });
  var cb = document.getElementById('checkbox'); 
  var cancelled = !cb.dispatchEvent(event);
  if (cancelled) {
    // A handler called preventDefault.
    alert("cancelled");
  } else {
    // None of the handlers called preventDefault.
    alert("not cancelled");
  }
}

查看Mozilla docs。

间接触发UI的事件

1 个答案: