Forum Moderators: open
function closer(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode;
targ = targ+'';
if (targ.indexOf('INPUT') <0) window.close();
}
<BODY onclick="closer()"> But in IE6, when I click the link that pops up the window, the text in the original window is replaced by the word [OBJECT], and the popup window closes when I click *anywhere*, including on an <INPUT> object.
The first part of the script is straight out of QuirksMode.org. I added only the last two lines myself.
Any idears? Thankie-doodle, -MBJ-
[b]<A href="#" onclick="popathon()">[/b]
instead of this way:
[b]<A href=javascript:popathon()>[/b]
But I still have that pesky problem of the window closing even when I click an INPUT element. It occurred to me to output the name of the object I'm clicking on with an alert(). (Duh.) When I do that I see the object name is always [object], no matter what I click on. It's not returning the actual name of the object. Well, that explains why the window is closing when I click an INPUT object: IE6 doesn't think I've clicked on an INPUT object. So the question becomes, how can I get the name of the object that was clicked in IE6?
targ = e.srcElement.tagName;
Be aware the returned string is in uppercase.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%}
</style>
<script type="text/javascript">
window.onload=function(){
var bd=document.getElementsByTagName("body");
bd[0].onclick=function(){
var targ=this.tagName;
alert(targ);
}
var inpt=document.getElementsByTagName("input");
inpt[0].onclick=function(){
var targ=this.tagName;
alert(targ);
}
}
</script>
</head>
<body>
<form action="">
<input type="text" value="Click here . . ." />
</form>
<p style="text-align:center;">
. . . and compare it to clicking here.
</p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%}
</style>
<script type="text/javascript">
var tag_flag=false;
function isInp(){
if(this.tagName.toUpperCase().indexOf("INPUT")==-1){
tag_flag==true? tag_flag=false : alert("close this window");
}else{
tag_flag=true;
alert("hands off this window");
}
}
window.onload=function(){
var bd=document.getElementsByTagName("body");
bd[0].onclick=isInp;
var inpt=document.getElementsByTagName("input");
for(var i=0;i<inpt.length;i++){
inpt[i].onclick=isInp;
}
}
</script>
</head>
<body>
<form action="">
<input type="text" value="Click here . . ." /><br />
<input type="text" value="Click here . . ." /><br />
<input type="text" value="Click here . . ." /><br />
</form>
<p style="text-align:center;">
. . . and compare it to clicking here.
</p>
</body>
</html>
function isInp(evt){
if(!evt)var evt=window.event;
this.tagName.toUpperCase().indexOf("INPUT")!=-1? evt.cancelBubble=true : alert("close this window");
}
Of course, the tag_flag variable becomes unnecessary with this modification.
function isInput(evt){
if (!evt) var evt=window.event;
this.tagName.toUpperCase().indexOf("INPUT")!=-1? evt.cancelBubble=true : alert("close this window");
}
window.onload=function(){
var theBody=document.getElementsByTagName("body");
theBody[0].onclick=isInput;
var inputTags=document.getElementsByTagName("input");
for (var i=0;i <inputTags.length; i++) {
inpt[i].onclick=isInput;
}
}
But this doesn't work. Even when I click on an INPUT object, the script still fires the "Close the window" alert.
Did I mess up the code somehow?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
</style>
<script type="text/javascript">
function isInp(evt){
if(!evt)var evt=window.event;
this.tagName.toUpperCase().indexOf("INPUT")!=-1? evt.cancelBubble=true : alert("close this window");
}
window.onload=function(){
var bd=document.getElementsByTagName("body");
bd[0].onclick=isInp;
var inpt=document.getElementsByTagName("input");
for(var i=0;i<inpt.length;i++){
inpt[i].onclick=isInp;
}
}
</script>
</head>
<body>
<form action="">
<input type="text" value="Click here . . ." /><br /><br />
<input type="text" value="Click here . . ." /><br /><br />
<input type="text" value="Click here . . ." />
</form>
<p style="text-align:center;">
. . . and compare it to clicking here.
</p>
</body>
</html>
function isInput(theEvent) {
if(!theEvent) theEvent=window.event;
this.tagName.toUpperCase().indexOf("INPUT")!=-1? theEvent.cancelBubble=true : alert("close this window");
}
window.onload=function() {
theBody=document.getElementsByTagName("body");
theBody[0].onclick=isInput;
inputFields=document.getElementsByTagName("input");
for(var i=0;i<inputFields.length;i++) {
inputFields[i].onclick=isInput;
}
}
Although it works I can't really follow it at all. I'd prefer to use the original code I posted, if I could just easily discover the name of the clicked object in IE6 so I could test for it. Surely there's an easier way to find the name of a clicked object than all of this? Thanks, -MBJ
The first line of the isInput() function tests for the event model being used and sets the value of the evt variable accordingly. In the ternary operator's expression, first a test is performed to determine if the target element of the event is an input element. If it is, the event is cancelled (evt.cancelBubble=true) instead of being allowed to bubble up to the body's event handler, otherwise the alert is triggered (naturally, in place of the alert you would put your window closing code).
So, you see, it's really pretty simple, just two lines of code to do the test.
document.onclick = function(eMoz)
{
var src = eMoz? eMoz.target : event.srcElement;
if( (src.tagName¦¦"").toUpperCase()!= "INPUT")
alert("CLOSE WINDOW");
}
Howzat?
Put the event handler on the document. This is immediately available, so no need to wait till the page loads. Event bubbling is over by this stage, so we don't need to (
cancelBubble / stopPropagationThe W3C interface's
<eventObj>.targettagName(src.tagName¦¦"")..to make sure that we don't cause an error by calling the
toUpperCaseundefined*!* Replace ¦¦ with unbroken pipe symbols, as usual.
(In fact, all browsers should return the tagName in upper case, but why tempt fate?)
