<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript事件冒泡实例一</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid blue}
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
</style>
</head>
<body>
<div id="box">
<h5 οnmοusedοwn="startDrag();"><a οnmοusedοwn="closeBox(event);" href="javascript:void(0);">×</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{
document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
}
function closeBox(e)
{
document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
stopBubble(e);
}
function stopBubble(e)
{
if (e && e.stopPropagation)
{
e.stopPropagation();
alert('a');
}
else
{
window.event.cancelBubble=true;
alert('b');
}
}
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JavaScript事件冒泡实例一</title>
<style type="text/css">
#box {width:200px; height:100px; border:2px solid blue}
#box h5 {margin:0; padding:2px 5px; font-size:18px; text-align:right; background:blue; cursor:move}
#box h5 a {text-decoration:none; color:#FFF}
</style>
</head>
<body>
<div id="box">
<h5 οnmοusedοwn="startDrag();"><a οnmοusedοwn="closeBox(event);" href="javascript:void(0);">×</a></h5>
<div id="testInfo"></div>
</div>
<script type="text/javascript">
function startDrag()
{
document.getElementById('testInfo').innerHTML += 'startDrag<br/>';
}
function closeBox(e)
{
document.getElementById('testInfo').innerHTML += 'closeBox<br/>';
stopBubble(e);
}
function stopBubble(e)
{
if (e && e.stopPropagation)
{
e.stopPropagation();
alert('a');
}
else
{
window.event.cancelBubble=true;
alert('b');
}
}
</script>
</body>
</html>
676
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
