javascript - 为内联 onmouseover 添加延迟

Question

我正在开发一个允许您在谷歌地图上查看项目的页面。您可以将鼠标悬停在公司地址上，它会将 map 移动到该位置并打开一个信息窗口。它工作完美，但 onmouseover 事件是内联的，因为每个 onmouseover 都有不同的 id，它由 php 变量设置。

问题是，我需要找到一种方法来为 onmouseover 事件添加延迟，以便用户必须在触发 onmouseover 之前将鼠标悬停在项目上几秒钟。

我查看了一些可能的解决方案，但似乎没有什么可以增加延迟。

onmouseover 链接看起来像这样......

<a onmouseover="javascript:triggerClick(<?php echo $id; ?>)" href="<?php echo $listingurl; ?>">

如有任何建议，我们将不胜感激。

Answer 1

你可以自己创造一些东西。将 onmouseover 事件拆分为 onmouseenter 和 onmouseleave。这将允许您在 onmouseenter 事件中启动超时并在 onmouseleave 事件中清除它。

function onEnter(){
  timeout = setTimeout(function(){
    //your code
  }, 1000);
}

function onLeave(){
  //in case the user leaves early stop the excution of your code
  clearTimeout(timeout);
}

这样，您将在操作触发之前有 1 秒的超时时间，如果用户在时间用完之前离开，则不会触发。

编辑

这是实际用例 https://codepen.io/anon/pen/YEMpBx

<a onmouseover="triggerClick(<?php echo $id; ?>, this)">Foo</a>

function triggerClick(id, element){
  var timeout = setTimeout(function(){
    //your code here
  }, 1000);

  element.addEventListener('mouseleave', function triggerLeave(event){
    clearTimeout(timeout);
    element.removeEventListener('mouseleave', triggerLeave);
  });
}