addeventlistener的问题

本文介绍了addeventlistener的问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 您好b $ b 我的代码如下，这让我度过了一个不眠之夜。该代码取自旧的经典ASP学习管理系统应用程序，它来自我称之为热点问题。向学生呈现图像和指令以点击图像的相关部分。因此叠加在图像上的是一个看不见的区域（热点），它是正确的点击区域。在下面的代码中，我已经使热点可见，并且它由粉红色矩形表示 - HS 1.因此，热点之外的图片的任何其他区域根据定义是不正确的点击位置。热点div位于顶部或图像上。 它是如何工作的？在页面加载时，代码将使用Javascript的单击事件与图片和热点相关联。然后，如果点击位于热点，则隐藏答案字段（HSIsCorrect）设置为是。如果点击位于热点之外，则答案字段HSIsCorrect设置为否并且表单已提交。 当我在开发环境中运行代码时在我的客户端使用IE 11的生产环境中，我没有遇到任何问题。但是，当我的客户端在相同的生产环境中运行它时，它无法检测到热点中的点击，除非他们直接点击顶部左侧角落的文本。就好像热点不存在，除非他们点击文字。 我不确定这是否与它有关，但我看到了当我的客户打开F12开发人员工具时，他们的默认设置被设置为IE 7.但是，即使我们将此更改为Edge，问题仍然存在。 请帮忙你可以！ 我尝试过： 这是码。要运行它，您必须指向PC上的图像： <％@ LANGUAGE = VBSCRIPT CODEPAGE = 65001 ％> < ！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // EN http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd\"> < html xmlns = http://www.w3.org/1999/xhtml > < head > < meta http-equiv = Content-Type content = text / html; charset = utf-8 / > ; < title > 热点测试< / title > < script language = JavaScript type = text / JavaScript > <！ - var elementIsClicked = false ; // 声明跟踪状态的变量 function clickHandlerHS（）{ // 声明一个更新状态的函数 elementIsClicked = 真; document .getElementById（ HSClicked).value = 是; document .getElementById（ HSIsCorrect).value = 是; alert（ 热点点击= + elementIsClicked）; formHSpot.submit（）; } function clickHandlerPic（）{ // 声明一个更新状态的函数 elementIsClicked = true ; document .getElementById（ HSClicked).value = 是; document .getElementById（ HSIsCorrect).value = 否; alert（ 图片clicked = + elementIsClicked）; formHSpot.submit（）; } function GetElement（）{ // 检查旧浏览器 var x = document .getElementById（ LayerHS）; if （x.addEventListener）{ // 对于所有主流浏览器，IE 8及更早版本除外 document .getElementById（ OldBrowser）。value = NO; var elementHS = document .getElementById（ LayerHS）; // 获取对热点元素的引用 elementHS.addEventListener（ 点击，clickHandlerHS）; // 将上述功能与点击事件相关联 var elementPic = document .getElementById（ HotSpotPic）; // 获取对图像元素的引用 elementPic.addEventListener（ 点击，clickHandlerPic）; // 将上述功能与点击事件相关联 } else if （x.attachEvent）{ // 对于IE 8及更早版本 document .getElementById（ OldBrowser）。value = YES; var elementHS = document .getElementById（ LayerHS）; // 获取对热点元素的引用 elementHS.attachEvent（ onclick，clickHandlerHS）; // 将上述功能与点击事件相关联 var elementPic = document .getElementById（ HotSpotPic）; // 获取对图像元素的引用 elementPic.attachEvent（ onclick，clickHandlerPic）; // 将上述功能与点击事件相关联 } } // - > < / script > < / head > < body onload = GetElement（）; > < img ID = HotSpotPic src = ../ Graphics / SomeImage.gif style = position：fixed;左：100px的;顶：150像素;宽度：120像素;高度：120像素; z-index：1; > < div id = LayerHS style = 已删除：已修复; removed100px; removed150px;宽度：100像素;高度：50像素;的z-index：2; border：thin solid＃FF00FF; > HS 1 < / div > < 表格 名称 = formHSpot 方法 = 发布 action = > < 输入 name = HSSave type = 提交 class = smallButton id = 刷新 value = 刷新页面 > < input type = 隐藏 name = HSClicked id = HSClicked value = > < input type = 隐藏 name = HSIsCorrect id = HSIsCorrect value = > < input type = 隐藏 名称 = OldBrowser id = OldBrowser value = > < / form > <％ if Request.Form（ HSClicked ）= 是然后 Response.Write（ 是否点击了热点？=& Request.Form（ HSClicked））& < ; br> Response.Write（ 点击是否正确？=& Request.Form（ HSIsCorrect））& < br> Response.Write（ 旧浏览器？=& Request.Form（ OldBrowser））& < br> else Response.Write（ 是否点击了热点？=否）& ; < br> Response.Write（ 点击是否正确？=& Request.Form（ HSIsCorrect））& < br> Response.Write（ 旧浏览器？=& Request.Form （ OldBrowser））& < br> end if ％> < / body > < / html > 解决方案 我通过将onclick事件直接添加到图片div和热点div来解决这个问题，从而绕过了的addEventListener。 HiI have the code below which is causing me sleepless nights. The code is taken from an old Classic ASP Learning Management System app and it is from what I call a hot spot question. The student is presented with an image and instruction to click on the relevant portion of the image. So superimposed over the image is an invisible area (the hot spot) that is the correct area to click on. In the code below I've made the hot spot visible and it is represented by the pink rectangle - HS 1. So, any other area of the picture outside of the hot spot is by definition an incorrect place to click. The Hot spot div is layered on top or the image.How does it work? On page load, the code associates a click event using Javascript to both the picture and the hotspot. Then if the click is in the hot spot a hidden answer field (HSIsCorrect) is set to "Yes". If the click is outside of the hot spot the answer field HSIsCorrect is set to "No" and the form is submitted.When I run the code in my development environment and on my client's production environment using IE 11 I don't get any problem. However when my client runs it on their same production environment it fails to detect the clicks in the hotspot UNLESS THEY CLICK DIRECTLY ON THE TEXT IN THE TOP LEFT CORNER. It's as if the hot spot doesn't exist unless they click on the text.I'm not sure if this has any bearing on it, but I see that when my client opens the F12 Developer tool, their default setting is set to IE 7. However, even when we change this to Edge the problem persists.Please help if you can!What I have tried:Here is the code. To run it you will have to point to an image on your PC:<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Hot spot test</title><script language="JavaScript" type="text/JavaScript"><!--var elementIsClicked = false; // declare the variable that tracks the statefunction clickHandlerHS(){ // declare a function that updates the stateelementIsClicked = true;document.getElementById("HSClicked").value = "Yes";document.getElementById("HSIsCorrect").value = "Yes";alert("Hot spot clicked="+elementIsClicked);formHSpot.submit();}function clickHandlerPic(){ // declare a function that updates the stateelementIsClicked = true;document.getElementById("HSClicked").value = "Yes";document.getElementById("HSIsCorrect").value = "No";alert("Picture clicked="+elementIsClicked);formHSpot.submit();}function GetElement() {//check for older browsersvar x = document.getElementById("LayerHS");if (x.addEventListener) { // For all major browsers, except IE 8 and earlierdocument.getElementById("OldBrowser").value = "NO";var elementHS = document.getElementById("LayerHS"); // grab a reference to the Hot spot elementelementHS.addEventListener("click", clickHandlerHS); // associate the function above with the click eventvar elementPic = document.getElementById("HotSpotPic"); // grab a reference to the image elementelementPic.addEventListener("click", clickHandlerPic); // associate the function above with the click event} else if (x.attachEvent) { // For IE 8 and earlier versionsdocument.getElementById("OldBrowser").value = "YES";var elementHS = document.getElementById("LayerHS"); // grab a reference to the Hot spot elementelementHS.attachEvent("onclick", clickHandlerHS); // associate the function above with the click eventvar elementPic = document.getElementById("HotSpotPic"); // grab a reference to the image elementelementPic.attachEvent("onclick", clickHandlerPic); // associate the function above with the click event}}//--></script></head><body onload="GetElement();"><img id="HotSpotPic" src="../Graphics/SomeImage.gif" style="position:fixed; left:100px; top:150px; width:120px; height:120px; z-index:1;"><div id="LayerHS" style=" removed:fixed; removed100px; removed150px; width:100px; height:50px; z-index:2; border: thin solid #FF00FF;">HS 1</div><form name="formHSpot" method="post" action=""> <input name="HSSave" type="submit" class="smallButton" id="Refresh" value="Refresh page"> <input type="hidden" name="HSClicked" id="HSClicked" value=""> <input type="hidden" name="HSIsCorrect" id="HSIsCorrect" value=""> <input type="hidden" name="OldBrowser" id="OldBrowser" value=""></form><%if Request.Form("HSClicked") = "Yes" thenResponse.Write("Was hot spot clicked?="&Request.Form("HSClicked"))&"<br>"Response.Write("Is click correct?="&Request.Form("HSIsCorrect"))&"<br>"Response.Write("Old browser?="&Request.Form("OldBrowser"))&"<br>"elseResponse.Write("Was hot spot clicked?=No")&"<br>"Response.Write("Is click correct?="&Request.Form("HSIsCorrect"))&"<br>"Response.Write("Old browser?="&Request.Form("OldBrowser"))&"<br>"end if%></body></html> 解决方案 I resolved this by adding an onclick event directly to the picture div and the hot spot divs, thus bypassing the "addEventListener". 这篇关于addeventlistener的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！