Question

我正在开发一个允许您在Google地图上查看商品的页面。您可以将鼠标悬停在商家地址上，然后将地图移动到该位置并打开信息窗口。它工作得很好，但是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); }); }

Answer 2

好的，我通过这个线程让它成功...这就是它现在看起来像它的工作......

<a onmouseover="setTimeout(function(){ javascript:triggerClick(<?php echo $id; ?>); }, 1000);" href="<?php echo $listingurl; ?>">

由于

添加延迟到内联onmouseover

2 个答案: