Entry
How can I find the element clicked on in a document?
How can I find the element clicked on in a document?
Jan 14th, 2002 03:42
Martin Honnen,
IE4+ and NN6 which offer complete dom access to every element allow
that, IE4+ most easily with checking
window.event.srcElement
NN6's dom is too advanced for this task as even text node can be the
target of a click (or other event) thus if you check
evt.target
in NN6 you might find a text node and not the element clicked. The
example code posted below works around that by checking for the
evt.target.nodeType
property which is 1 for element nodes.
Opera 6 when identifying itself as IE5 has no problem using the IE code
window.event.srcElement
however Opera 6 when identifying itself as Mozilla is not DOM
compliant (text nodes are not the target, nodes do not have a nodeType
property), thus the NN6 code doesn't work with Mozilla. Therefore the
example page posted below contains a code check for Opera and some
extra code for Opera which has been tested to work with Opera 6.
NN4 is a problem for this task as it doesn't make all elements
scriptable respectively most elements (like <p> elements) cannot be
target of a click, instead the document is considered as being
clicked. Therefore the NN4 code included is only helpful if an img
element or a link or another element like a button is clicked.
<html>
<head>
<title>
click target/srcElement
</title>
<script type="text/javascript">
if (document.layers) {
document.captureEvents(Event.MOUSEUP);
document.onmouseup = clickHandler;
}
else if (document.attachEvent) {
document.attachEvent('onclick', clickHandler);
}
else if (document.addEventListener) {
document.addEventListener('click', clickHandler, false);
}
else
document.onclick = clickHandler;
function clickHandler (evt) {
if (document.layers)
alert(evt.target + ': ' + evt.target.constructor + ': ' +
evt.target.id);
else if (window.event && window.event.srcElement)
alert(window.event.srcElement + ': ' +
window.event.srcElement.tagName + ': ' + window.event.srcElement.id);
else if (evt && evt.stopPropagation && !window.opera) {
if (evt.target.nodeType == 1)
alert(evt.target + ': ' + evt.target.nodeName + ': ' +
evt.target.id);
else
alert(evt.target.parentNode + ': ' +
evt.target.parentNode.nodeName + ': ' + evt.target.parentNode.id)
}
else if (window.opera && evt)
alert(evt.target + ': ' + evt.target.tagName + ': ' +
evt.target.id);
}
</script>
<style type="text/css">
#layer0 {
position: absolute;
z-index: 5;
left: 100px; top: 200px;
width: 100px; height: 100px;
clip: rect(0 100px 100px 0);
background-color: lightblue;
layer-background-color: lightblue;
}
#layer1 {
position: absolute;
z-index: 1;
left: 150px; top: 200px;
width: 100px; height: 100px;
clip: rect(0 100px 100px 0);
background-color: lightyellow;
layer-background-color: lightyellow;
}
</style>
</head>
<body>
<p id="p0">
Kibology for all.<img src="kiboInside.gif" alt="Kibo inside"
id="img0" />
<a href="http://www.kibo.com/" target="_blank">Visit GOD</a>
</p>
<div id="layer0">Kibology</div>
<div id="layer1">Kibology</div>
</body>
</html>
