Javascript 如何以编程方式触发"；“意图”；论元素_Javascript_Jquery_Hoverintent

Javascript 如何以编程方式触发"；“意图”；论元素

javascript jquery

Javascript 如何以编程方式触发"；“意图”；论元素,javascript,jquery,hoverintent,Javascript,Jquery,Hoverintent,我使用的是Tristen Brown，它是jQuery库的纯Javascript版本我有两个元素第一个和第二个第二个second元素具有hoverintent处理程序，该处理程序会在该元素上方显示工具提示。当我手动将鼠标悬停在秒上时，工具提示将按预期显示我想以编程方式触发second的工具提示。例如，与第一个元素交互会导致出现第二个元素的工具提示。我尝试使用jQuerytrigger来实现这一点。我能够触发鼠标悬停处理程序，但没有任何悬停意图有什么建议吗以下是我的Javascript：

我使用的是Tristen Brown，它是jQuery库的纯Javascript版本

我有两个元素

第一个

和

第二个

第二个

second

元素具有

hoverintent

处理程序，该处理程序会在该元素上方显示工具提示。当我手动将鼠标悬停在

秒

上时，工具提示将按预期显示

我想以编程方式触发

second

的工具提示。例如，与

第一个

元素交互会导致出现

第二个

元素的工具提示。我尝试使用jQuery

trigger

来实现这一点。我能够

触发

鼠标悬停处理程序，但没有任何悬停意图

有什么建议吗

以下是我的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


触发


悬停意图
你好

完整的JS bin在这里：

根据图书馆的源代码，它依赖于鼠标盖和鼠标出。要确定鼠标位置，可以使用clientX和clientY，而不是pageX/Y

源文件：

我想通过将鼠标移到第一个元素上来触发第二个元素的工具提示

您可以将一系列鼠标事件分派到

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

啊，只是为了给大家提供更多的背景。我试图使用

postMessage

在iFrame之间传递消息，并且需要以编程方式触发元素的hoverIntent。因此，将hoverIntent附加到第一个元素在这个上下文中不起作用。明白了。请参阅我的更新答案和演示。我希望这就是你想要的。太棒了，谢谢你！不过，我很好奇为什么jQuery的

触发器不起作用。我还发现它也依赖于mousemove
。我将示例更改为clientX
和clientY
，但仍然不能正常工作。