Event propagation

R

Ryan Chan

Hello,

I have following simple codes:

####################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
#t1 {
width:400px;
height:300px;
background-color:green;
}

#t2 {
width:200px;
height:200px;
background-color:red;
margin-top:-100px;
}

</style>
</head>
<body>

<div id="t1" onclick="alert('t1');"></div>

<div id="t2" ></div>

</body>
</html>

####################


Just wonder why when clicking the overlapped area, the alert of t1
does not occur.

Thanks...
 
V

VK

Ryan said:
I have following simple codes:

####################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>Test</title>
   <style>
        #t1 {
            width:400px;
            height:300px;
            background-color:green;
        }

        #t2 {
            width:200px;
            height:200px;
            background-color:red;
            margin-top:-100px;
        }

   </style>
</head>
<body>

<div id="t1" onclick="alert('t1');"></div>

<div id="t2" ></div>

</body>
</html>

####################

Just wonder why when clicking the overlapped area, the alert of t1
does not occur.

Thanks...
Click to expand...

? Because it is overlapped.
 
J

Jorge

(...)
Just wonder why when clicking the overlapped area, the alert of t1
does not occur.
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
#t1 {
width:400px;
height:300px;
background-color:green;
}
#t2 {
position:absolute;
top:200px;
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div id="t1" onclick="alert('t1'); return true;"><div id="t2" ></
div></div>
</body>
</html>
 
R

Ryan Chan

Hello,



Thanks for your reply.

But I only want the overlapped area to response, not the whole t2.
 
J

Jorge

But I only want the overlapped area to response, not the whole t2.
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
#t1 {
width:400px;
height:300px;
background-color:green;
}
#t2 {
position:relative;
top:200px;
width:200px;
height:100px;
background-color:red;
}
.t2 {
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="t1" onclick="alert('t1'); return true;"><div id="t2" ></
div></div>
<div class="t2" ></div>
</body>
</html>
 
J

Jorge

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
 #t1 {
  width:400px;
  height:300px;
  background-color:green;
 }
 #t2 {
  position:relative;
  top:200px;
  width:200px;
  height:100px;
  background-color:red;
 }
 .t2 {
  width:200px;
  height:100px;
  background-color:red;
 }
</style>
</head>
<body>
 <div id="t1" onclick="alert('t1'); return true;"><div id="t2" ></
div></div>
 <div class="t2" ></div>
</body>
</html>
Click to expand...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
#t1 {
width:400px;
height:300px;
background-color:green;
overflow:hidden;
}
#t2 {
position:relative;
top:200px;
width:200px;
height:200px;
background-color:red;
}
.t2 {
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="t1" onclick="alert('t1'); return true;"><div id="t2" ></
div></div>
<div class="t2" ></div>
</body>
</html>
 
S

SAM

Le 10/17/09 10:49 PM, Jorge a écrit :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<style>
#t1 {
width:400px;
height:300px;
background-color:green;
Click to expand...

position: relative; /* for IE and overflow */
overflow:hidden;
}
#t2 {
position:relative;
top:200px;
width:200px;
height:200px;
background-color:red;
}
.t2 {
width:200px;
height:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="t1" onclick="alert('t1'); return true;"><div id="t2" ></
div></div>
<div class="t2" ></div>
</body>
</html>
Click to expand...


C'est de la triche ! ;-)
That's cheating !
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Please Help? 0
Help with my responsive home page 2
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
Snowing Effect 2
Help with Visual Lightbox: Scripts 2
Help with code 0
Show text on-click with transition 2

Members online

No members online now.
Total: 48 (members: 1, guests: 47)
Robots: 140

Forum statistics

Threads
473,774
Messages
2,569,599
Members
45,175
Latest member
Vinay Kumar_ Nevatia

Latest Threads

Top