如何以编程方式在元素上触发“hoverintent”答案

【问题标题】：How do I programmatically trigger "hoverintent" on an element如何以编程方式在元素上触发“hoverintent”
【发布时间】：2015-06-02 06:53:23
【问题描述】：

我正在使用 Tristen Brown 的 hoverintent library，它是 jQuery hoverIntent 库的纯 Javascript 版本。

我有两个元素 first 和 second。

second 元素具有 hoverintent 处理程序，这会导致工具提示出现在该元素上方。当我手动将鼠标悬停在second 上时，工具提示会按预期显示。

我想以编程方式触发second 的工具提示。例如，与first 元素进行交互会导致出现second 元素的工具提示。我曾尝试使用 jQuery trigger 来做到这一点。我可以trigger mouseover 处理程序，但不能使用任何 hoverIntent。

有什么建议吗？

这是我的 Javascript：

$( document ).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');

  $(first).mouseover(function(){
    $(second).trigger({ type:"mouseover", clientX:"350", clientY:"105" });
    $(second).trigger({ type:"mousemove", clientX:"350", clientY:"105" });
  });

  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });

  $(second).mouseover(function(){
    console.log("mouseover");
  });
});

这是我的 HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src='http://tristen.ca/hoverintent/dist/hoverintent.min.js'></script>

  <meta charset="utf-8">
  <title>JS Bin</title>
</head>

<body>
  <div style="padding:100px;">
    <ul class='examples'>
      <li id='first'>
        Trigger
      </li>
      <li id='second'>
        hoverintent
        <span class='popup'>Hi there</span>
      </li>
    </ul>
  </div>
</body>

</html>

完整的 JS bin 在这里：

http://jsbin.com/kumeva/4/edit?js,output

【问题讨论】：

标签： javascript jquery hoverintent

【解决方案1】：

我想通过将鼠标悬停在第一个元素上来触发第二个的工具提示。

您可以向#second 发送一系列鼠标事件，并将hoverintent 代码和发送代码完全分开，如下所示：

// Hoverintent code
$(document).ready(function() {
  var second = document.getElementById('second');
  hoverintent(second, function(e) {
    this.className = 'on';
  }, function(e) {
    this.className = 'off';
  });
});

///////////////////////////////////

// Dispatch code
$(document).ready(function() {
  var first = document.getElementById('first');
  var second = document.getElementById('second');
  $(first).on("mouseover", function(){
    // Send a mouseover to wake hoverintent
    var event = new MouseEvent("mouseover");
    second.dispatchEvent(event);

    // Send a mousemove trigger the internal hover code
    event = new MouseEvent("mousemove");
    second.dispatchEvent(event);
  });

  $(first).on("mouseout", function(){
    // Cancel the hover code
    var event = new MouseEvent("mouseout");
    second.dispatchEvent(event);
  });
});

Demo

【讨论】：

啊，只是为了提供更多上下文。我正在尝试使用postMessage 在 iframe 之间传递消息，并且需要以编程方式触发元素的 hoverIntent。因此，将 hoverIntent 附加到第一个元素在这种情况下不起作用。
明白了。请参阅我更新的答案和演示。我希望这就是你要找的。span>
太棒了，谢谢！很好奇为什么 jQuery 的 trigger 不起作用。

【解决方案2】：

根据库的源代码，它接缝它依赖于mouseover和mouseout。要确定鼠标位置，它会使用 clientX 和 clientY，而不是 pageX/Y。

源文件：https://github.com/tristen/hoverintent/blob/gh-pages/index.js

【讨论】：

我还看到它也依赖于mousemove。我将示例更改为clientX 和clientY，但仍然无法正常工作。