Проблема метода addEventListener
Привет
У меня есть код ниже, который вызывает у меня бессонные ночи. Код взят из старого классического приложения ASP Learning Management System, и это то, что я называю вопросом горячей точки. Ученику предъявляется изображение и инструкция нажать на соответствующую часть изображения. Таким образом, на изображение накладывается невидимая область (горячая точка), которая является правильной областью для нажатия. В приведенном ниже коде я сделал горячую точку видимой, и она представлена розовым прямоугольником - HS 1. Таким образом, любая другая область изображения за пределами горячей точки по определению является неправильным местом для щелчка. Горячая точка div накладывается сверху или на изображение.
Как это работает? При загрузке страницы код связывает событие щелчка с помощью Javascript как с изображением, так и с точкой доступа. Затем, если щелчок находится в горячей точке, скрытое поле ответа (HSIsCorrect) устанавливается в значение "Да". Если щелчок находится за пределами горячей точки, поле ответа HSIsCorrect устанавливается в значение "нет", и форма отправляется.
Когда я запускаю код в своей среде разработки и в производственной среде моего клиента с помощью IE 11, я не получаю никаких проблем. Однако, когда мой клиент запускает его в той же производственной среде, он не может обнаружить щелчки в точке доступа, если только он не нажимает непосредственно на текст в левом верхнем углу. Как будто горячей точки не существует, пока они не нажмут на текст.
Я не уверен, имеет ли это какое-либо отношение к этому, но я вижу, что когда мой клиент открывает инструмент разработчика F12, его настройка по умолчанию установлена на IE 7. Однако даже когда мы меняем это на край, проблема сохраняется.
Пожалуйста, помогите, если можете!
Что я уже пробовал:
Вот код. Чтобы запустить его вам нужно будет указать на изображение на вашем компьютере:
<%@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>