Problem with addeventlistener

Question

0.00/5 (No votes)

See more:

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:

HTML

<%@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>

Posted 9-Sep-16 0:57am

Member 12480887

Updated 9-Sep-16 23:24pm

Patrice T

v3

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12480887 · Answer 1 · 2016-09-09T23:09:00

Solution 1

I resolved this by adding an onclick event directly to the picture div and the hot spot divs, thus bypassing the "addEventListener".

Posted 9-Sep-16 23:09pm

Member 12480887

Comments

Patrice T 10-Sep-16 6:35am

Use Accept answer to close the question.