addeventlistener的问题 [英] Problem with addeventlistener

问题描述

您好b $ b

我的代码如下，这让我度过了一个不眠之夜。该代码取自旧的经典ASP学习管理系统应用程序，它来自我称之为热点问题。向学生呈现图像和指令以点击图像的相关部分。因此叠加在图像上的是一个看不见的区域（热点），它是正确的点击区域。在下面的代码中，我已经使热点可见，并且它由粉红色矩形表示 - HS 1.因此，热点之外的图片的任何其他区域根据定义是不正确的点击位置。热点div位于顶部或图像上。



它是如何工作的？在页面加载时，代码将使用Javascript的单击事件与图片和热点相关联。然后，如果点击位于热点，则隐藏答案字段（HSIsCorrect）设置为是。如果点击位于热点之外，则答案字段HSIsCorrect设置为否并且表单已提交。



当我在开发环境中运行代码时在我的客户端使用IE 11的生产环境中，我没有遇到任何问题。但是，当我的客户端在相同的生产环境中运行它时，它无法检测到热点中的点击，除非他们直接点击顶部左侧角落的文本。就好像热点不存在，除非他们点击文字。



我不确定这是否与它有关，但我看到了当我的客户打开F12开发人员工具时，他们的默认设置被设置为IE 7.但是，即使我们将此更改为Edge，问题仍然存在。



请帮忙你可以！



我尝试过：



这是码。要运行它，您必须指向PC上的图像：

 <％@  < span class =code-attribute> LANGUAGE   =  VBSCRIPT    CODEPAGE   =  65001 ％>  
 <  ！DOCTYPE     html     PUBLIC     -  // W3C // DTD     XHTML     1.0     Transitional // EN   http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd\">  
 <  < span class =code-leadattribute> 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 >  
<！ -  
 < span class =code-keyword> 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   = < span class =code-keyword> 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   =  < span class =code-keyword>>  
 <  输入    name   =  HSSave    type   = 提交    class   =  smallButton    id   = 刷新    value   = 刷新页面 >  
 <   input     type   =  隐藏    name   =  HSClicked    id   =  HSClicked    value   =  >  
 <   input     type   = 隐藏    name   =  HSIsCorrect   < span class =code-attribute> id   =  HSIsCorrect    value   =  >  
 <  < span class =code-leadattribute> 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（ < span class =code-string>旧浏览器？=& Request.Form（  OldBrowser））&  < br> 
  else  
 Response.Write（ 是否点击了热点？=否）& ;  < br> 
 Response.Write（ 点击是否正确？=& Request.Form（ < span class =code-string> HSIsCorrect））&  < br> 
 Response.Write（ 旧浏览器？=& Request.Form （  OldBrowser））&   < br> 
 end  if  
％> 
 <   / body  >  
 <   / html  >  

解决方案

我通过将onclick事件直接添加到图片div和热点div来解决这个问题，从而绕过了的addEventListener。

Hi
I 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 state

function clickHandlerHS(){ // declare a function that updates the state
	elementIsClicked = 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 state
	elementIsClicked = true;
	document.getElementById("HSClicked").value = "Yes";
	document.getElementById("HSIsCorrect").value = "No";
alert("Picture clicked="+elementIsClicked);
	formHSpot.submit();
}

function GetElement() {
	//check for older browsers
	var x = document.getElementById("LayerHS");
	if (x.addEventListener) {                    // For all major browsers, except IE 8 and earlier
document.getElementById("OldBrowser").value = "NO";
		var elementHS = document.getElementById("LayerHS"); // grab a reference to the Hot spot element
		elementHS.addEventListener("click", clickHandlerHS); // associate the function above with the click event
		
		var elementPic = document.getElementById("HotSpotPic"); // grab a reference to the image element
		elementPic.addEventListener("click", clickHandlerPic); // associate the function above with the click event
	} else if (x.attachEvent) {                  // For IE 8 and earlier versions
document.getElementById("OldBrowser").value = "YES";
		var elementHS = document.getElementById("LayerHS"); // grab a reference to the Hot spot element
		elementHS.attachEvent("onclick", clickHandlerHS); // associate the function above with the click event
		
		var elementPic = document.getElementById("HotSpotPic"); // grab a reference to the image element
		elementPic.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" then
	Response.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>"
else
	Response.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的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！