在多个滑块元素上捕获鼠标悬停
Posted
技术标签:
【中文标题】在多个滑块元素上捕获鼠标悬停【英文标题】:Capturing mouseover on multiple slider elements 【发布时间】:2018-04-05 20:39:59 【问题描述】:你想做什么?
我正在尝试跟踪鼠标悬停在轮播滑块每张幻灯片上的工具提示(轮播滑块示例:here)。每张幻灯片都有 3-5 个可见的工具提示。当鼠标悬停在工具提示上时,会触发一个数据层事件。
每个工具提示都有相同的类变量并且没有 ID。根据可见的幻灯片,代码会更新以包含或删除工具提示行。
示例 html:幻灯片 1
<div id="container">
<div class="tooltip" style="top: 140px; left: 260px;" tooltip="0"></div>
<div class="tooltip" style="top: 80px; left: 450px;" tooltip="1"></div>
<div class="tooltip" style="top: 200px; left: 730px;" tooltip="2"></div>
<div class="tooltip" style="top: 300px; left: 700px;" tooltip="3"></div>
<div class="tooltip" style="top: 550px; left: 840px;" tooltip="4"></div>
</div>
示例 HTML:幻灯片 2
<div id="container">
<div class="tooltip" style="top: 140px; left: 260px;" tooltip="0"></div>
<div class="tooltip" style="top: 80px; left: 450px;" tooltip="1"></div>
<div class="tooltip" style="top: 200px; left: 730px;" tooltip="2"></div>
</div>
您当前尝试执行此操作的代码是什么?
<script>
function hover(eClass)
var elem = document.getElementsByClassName(eClass);
for (var i=0;i<elem.length;i++)
elem[i].addEventListener('mouseover', mouseOver);
function mouseOver()
dataLayer.push(
'event':'elementHover'
);
var elem = null;
var i = null;
hover("tooltip")
</script>
您期望结果是什么?
我希望每当工具提示悬停在轮播滑块上时都会触发 dataLayer 事件,无论它在哪个幻灯片上(第 1、第 2、第 5)。我尝试在每次悬停后重置 elem var 和 i var,以便脚本获得最新数量的幻灯片工具提示,但我一定做错了。
实际结果如何?
javascript 代码工作并触发工具提示鼠标悬停在第一张幻灯片上的事件。当我转到上一张或下一张幻灯片时,当我将鼠标悬停在工具提示上时,脚本不再触发事件。
【问题讨论】:
可以在每次幻灯片更改后应用事件监听器吗?换句话说,每当幻灯片发生变化时,可能会调用hover("tooltip")
。
我认为是因为在幻灯片放映之前,元素没有以html呈现,这意味着它们无法通过“getElementsByClassName”获取,因此工具提示显示之后没有绑定事件监听器。您可以做的是动态执行 addEventListener 或将 CSS“悬停”添加到您的工具提示中。
@snapjs - 哇。我的菜鸟监督。轻松修复。谢谢!
【参考方案1】:
解决方案是在每次幻灯片更改后应用事件侦听器(即,在幻灯片更改时调用 hover("tooltip")
以确保事件侦听器在 DOM 元素存在后应用)。
【讨论】:
是的!我的菜鸟监督。感谢您的快速修复。以上是关于在多个滑块元素上捕获鼠标悬停的主要内容,如果未能解决你的问题,请参考以下文章
Javascript 或 Jquery 检查是不是将鼠标悬停在元素上