如何以编程方式触发元素上的 "hoverintent"

Question

我正在使用 Tristen Brown 的 hoverintent library, which is a pure Javascript version of the jQuery hoverIntent 库。

我有两个元素 first 和 second。

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

我想以编程方式触发 second 的工具提示。例如，要与 first 元素进行交互，会导致显示 second 元素的工具提示。我尝试使用 jQuery trigger 来做到这一点。我可以 trigger 鼠标悬停处理程序，但不能使用任何 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

Answer 1

根据图书馆的源代码，它依赖于mouseover和mouseout。要确定鼠标位置，应该使用 clientX 和 clientY，而不是 pageX/Y .

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

Answer 2

I would like to trigger the tooltip of second by mousing over the first element.

您可以将一系列鼠标事件分派到 #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);
  });
});

如何以编程方式触发元素上的 "hoverintent"

How do I programmatically trigger "hoverintent" on an element

javascript

jquery

hoverintent

Demo