Question

如果您遇到类似事件侦听器问题的问题，问题可能出在您的CSS上，而不是您的Javascript。有关详细信息，请参阅下面的答案。

我花了相当多的时间搜索SO并查看其他人对类似问题的解决方案无济于事，所以我最终不得不创建一个帐户。

我正在制作一个网页，上面有一张世界地图的图片，上面有一些定位销，代表办公地点。这个想法是将鼠标悬停在其中一个引脚上会改变页面上其他部分的图像和文字。

然而，当我将鼠标悬停在任何一个引脚上时，根本没有任何事情发生。其他地方没有文本或图像更改，并且没有消息打印到控制台。我没有看到任何错误报告。我已经确定事件在文档准备好之后才会受到限制，所以我对于我做错了什么感到有点失落。打印控制台消息“document ready”确实打印，表明应绑定侦听器。我尝试过“点击”交换没有效果，我也尝试使用jQuery将事件委托给文档（在类似的问题中提出）并且没有看到任何改进。

非常感谢任何帮助。

编辑：看到一些关于清晰度的评论，我已经在我的javascript中注释掉了所有代码，除了下面列出的内容。当鼠标悬停在元素上时，我仍然看不到任何控制台消息。在控制台中再次看到我没有看到任何错误消息，我可以验证事件“mouseenter”实际上是绑定到meridianPin。

地图的HTML如下所示：

<!-- Image & Map Widgets -->
<div id="mapContainer" class="itt-contact-img-container">
  <img class="itt-full-width-image" src="./Images/mapBanner.png" alt="worldMap">
  <img id="bangalorePin" class="itt-contact-pin itt-contact-pin-bangalore" src="./Icons/svg/locationIcon.svg">
  <img id="rosevillePin" class="itt-contact-pin itt-contact-pin-roseville" src="./Icons/svg/locationIcon.svg">
  <img id="mumbaiPin" class="itt-contact-pin itt-contact-pin-mumbai" src="./Icons/svg/locationIcon.svg">
  <img id="jaipurPin" class="itt-contact-pin itt-contact-pin-jaipur" src="./Icons/svg/locationIcon.svg">
  <img id="lakeoswegoPin" class="itt-contact-pin itt-contact-pin-lakeoswego" src="./Icons/svg/locationIcon.svg">
  <img id="camasPin" class="itt-contact-pin itt-contact-pin-camas" src="./Icons/svg/locationIcon.svg">
  <img id="meridianPin" class="itt-contact-pin itt-contact-pin-meridian" src="./Icons/svg/locationIcon.svg">
</div>

注释掉除此之外的所有事件侦听器绑定：

$(document).ready(function(){
  console.log("document ready");
    document.getElementById("meridianPin").addEventListener("mouseenter", meridianHighlight);
})

这是现在所讨论的突出显示功能，其他所有内容都被注释掉了：

function meridianHighlight(){
  console.log("meridian highlight");

  $("#itt-contact-silhouette").attr("src","./Icons/svg/idaho.svg");

  $("#itt-contact-hdr-merdian").css("display","block");
  $("#itt-contact-info-merdian").css("display","block");
  $("#itt-contact-hdr-camas").css("display","none");
  $("#itt-contact-info-camas").css("display","none");
  $("#itt-contact-hdr-lakeoswego").css("display","none");
  $("#itt-contact-info-lakeoswego").css("display","none");
  $("#itt-contact-hdr-roseville").css("display","none");
  $("#itt-contact-info-roseville").css("display","none");
  $("#itt-contact-hdr-jaipur").css("display","none");
  $("#itt-contact-info-jaipur").css("display","none");
  $("#itt-contact-hdr-mumbai").css("display","none");
  $("#itt-contact-info-mumbai").css("display","none");
  $("#itt-contact-hdr-bangalore").css("display","none");
  $("#itt-contact-info-bangalore").css("display","none");
}

Answer 1

原来这是一个CSS问题。在我的HTML中你可以看到＆＃34; mapBanner＆＃34;在图像组的顶部，这是跨越视口宽度的大图像，而每个位置图标是22x22px。图标出现在页面上的世界地图图像的顶部，但没有注意到他们的鼠标悬停事件监听器。我将地图图片更改为包含div的背景图像，现在事件监听器按照应有的方式激活。

我很高兴知道如何前进，但我仍然不明白我之前所做的事情是错的（除了它不起作用），我是否应该期望页面大元素来掩盖事件监听器？中的较小元素？

Answer 2

你还没有提供所有的回调函数，所以我们无法知道确切的问题是什么，但你提供的那个是应该解雇的，所以我倾向于认为你有一些语法错误在剩下的代码中阻止所有代码运行。

$(document).ready(function(){
  console.log("document ready");
    document.getElementById("meridianPin").addEventListener("mouseenter", meridianHighlight);

})

function meridianHighlight(){
  console.log("meridian highlight");

  $("#itt-contact-silhouette").attr("src","./Icons/svg/idaho.svg");

  $("#itt-contact-hdr-merdian").css("display","block");
  $("#itt-contact-info-merdian").css("display","block");
  $("#itt-contact-hdr-camas").css("display","none");
  $("#itt-contact-info-camas").css("display","none");
  $("#itt-contact-hdr-lakeoswego").css("display","none");
  $("#itt-contact-info-lakeoswego").css("display","none");
  $("#itt-contact-hdr-roseville").css("display","none");
  $("#itt-contact-info-roseville").css("display","none");
  $("#itt-contact-hdr-jaipur").css("display","none");
  $("#itt-contact-info-jaipur").css("display","none");
  $("#itt-contact-hdr-mumbai").css("display","none");
  $("#itt-contact-info-mumbai").css("display","none");
  $("#itt-contact-hdr-bangalore").css("display","none");
  $("#itt-contact-info-bangalore").css("display","none");
}

#meridianPin {
  width:300px;
  height:300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Image & Map Widgets -->
<div id="mapContainer" class="itt-contact-img-container">
  <img class="itt-full-width-image" src="./Images/mapBanner.png" alt="worldMap">
  <img id="bangalorePin" class="itt-contact-pin itt-contact-pin-bangalore" src="./Icons/svg/locationIcon.svg">
  <img id="rosevillePin" class="itt-contact-pin itt-contact-pin-roseville" src="./Icons/svg/locationIcon.svg">
  <img id="mumbaiPin" class="itt-contact-pin itt-contact-pin-mumbai" src="./Icons/svg/locationIcon.svg">
  <img id="jaipurPin" class="itt-contact-pin itt-contact-pin-jaipur" src="./Icons/svg/locationIcon.svg">
  <img id="lakeoswegoPin" class="itt-contact-pin itt-contact-pin-lakeoswego" src="./Icons/svg/locationIcon.svg">
  <img id="camasPin" class="itt-contact-pin itt-contact-pin-camas" src="./Icons/svg/locationIcon.svg">
  <img id="meridianPin" class="itt-contact-pin itt-contact-pin-meridian" src="./Icons/svg/locationIcon.svg">
</div>

Javascript事件侦听器未触发

2 个答案: