87,910
社区成员
发帖
与我相关
我的任务
分享哪位能解释一下，关于事件冒泡，给分
[html]
<!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=gb2312" />
<title>Dragme</title>
<style>
.glow{background-color:#ff7300;cursor:move;border:1px outset #999}
</style>
</head>
<body>
<div style="position:absolute;left:100px;top:100px; background-color:#f6f6f6;border:1px solid #ccc;">
<div style=" background-color:#ccc;border-bottom:dotted #000;padding:3px;font-weight:bold;" onmouseover="this.style.cursor='move';"onmousedown="beginDrag(this.parentNode,event);">
Drag Me just Drag me pls
</div>
<p>this a test testing testing<p>test<p>test<p>test
</div>
</body>
</html>
<script language="javascript">
function beginDrag(elementToDrag,event){
elementToDrag.className="glow";
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
document.attachEvent("onmousemove",moveHandler);//onmousemove
document.attachEvent("onmouseup",upHandler);//onmouseup
}
/*if(event.stopPropagation)event.stopPropagation();
else event.cancelBubble =true;
if(event.preventDefault)event.preventDefault();
else event.returnValue = false;
*/
function moveHandler(e){
if(!e)e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
/*
if(e.stopPropagation)e.stopPropagation();
else e.cancelBubble =true;
*/
}
function upHandler(e){
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else if(document.detachEvent){
document.detachEvent("onmouseup",upHandler) ;
document.detachEvent("onmousemove",moveHandler);
}
/* if(e.stopPropagation)event.stopPropagation();
else e.cancelBubble =true;
*/
}
}
</script>
[/html]
代码中，我用/*----*/注释掉的部分，是所谓的阻止事件冒泡的代码，但是，好像我注释掉，也没有什么问题，哪位能讲解讲解，拜谢。
ps：哪位知道哪里有比较全面的关于js事件处理的学习材料，网上网下的，给个名字也行，犀牛书以外。
<!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=gb2312" />
<title>Dragme</title>
<style>
.glow{background-color:#ff7300;cursor:move;border:1px outset #999}
</style>
</head>
<body>
<div style="position:absolute;left:100px;top:100px; background-color:#f6f6f6;border:1px solid #ccc;">
<div style=" background-color:#ccc;border-bottom:dotted #000;padding:3px;font-weight:bold;" onmouseover="this.style.cursor='move';"onmousedown="beginDrag(this.parentNode,event);">
Drag Me just Drag me pls
</div>
<p>this a test testing testing<p>test<p>test<p>test
</div>
</body>
</html>
<script language="javascript">
function beginDrag(elementToDrag,event){
elementToDrag.className="glow";
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener){
document.addEventListener("mousemove",moveHandler,true);
document.addEventListener("mouseup",upHandler,true);
}
else if(document.attachEvent){
document.attachEvent("onmousemove",moveHandler);//onmousemove
document.attachEvent("onmouseup",upHandler);//onmouseup
}
/*if(event.stopPropagation)event.stopPropagation();
else event.cancelBubble =true;
if(event.preventDefault)event.preventDefault();
else event.returnValue = false;
*/
function moveHandler(e){
if(!e)e=window.event;
elementToDrag.style.left=(e.clientX-deltaX)+"px";
elementToDrag.style.top=(e.clientY-deltaY)+"px";
/*
if(e.stopPropagation)e.stopPropagation();
else e.cancelBubble =true;
*/
}
function upHandler(e){
if(document.removeEventListener){
document.removeEventListener("mouseup",upHandler,true);
document.removeEventListener("mousemove",moveHandler,true);}
else if(document.detachEvent){
document.detachEvent("onmouseup",upHandler) ;
document.detachEvent("onmousemove",moveHandler);
}
/* if(e.stopPropagation)event.stopPropagation();
else e.cancelBubble =true;
*/
}
}
</script>
[/html]
代码中，我用/*----*/注释掉的部分，是所谓的阻止事件冒泡的代码，但是，好像我注释掉，也没有什么问题，哪位能讲解讲解，拜谢。
ps：哪位知道哪里有比较全面的关于js事件处理的学习材料，网上网下的，给个名字也行，犀牛书以外。
...全文
请发表友善的回复…
发表回复
是是非非 2006-01-25
- 打赏
- 举报
回复 | 推荐 | 收藏 | 专题 | 公告 | 管理 | 关闭窗口
点这个管理链接～
输入密码
在最下面的文本筐里输入100
然后点击上面的 给分按钮
嘿嘿～～
点这个管理链接～
输入密码
在最下面的文本筐里输入100
然后点击上面的 给分按钮
嘿嘿～～
blovego0o 2006-01-25
- 打赏
- 举报
另：初来，怎么给分阿？
blovego0o 2006-01-25
- 打赏
- 举报
谢谢两位的解释
ice_berg16 2006-01-24
- 打赏
- 举报
DOM对象是像树状结构的，子对象的事件也会触发父对象的事件，
<body onclick="alert(2)">
<span onclick="alert(1)">aaa</span>
</body>
如上点击aaa文字会触发onclick事件，由于span在body中，所以点击aaa时也会触发body的onclick事件，如果我让event.cacelBubble=true，那么span的onclick事件就不会传递到body上，阻止两次弹出对话框
<body onclick="alert(2)">
<span onclick="alert(1)">aaa</span>
</body>
如上点击aaa文字会触发onclick事件，由于span在body中，所以点击aaa时也会触发body的onclick事件，如果我让event.cacelBubble=true，那么span的onclick事件就不会传递到body上，阻止两次弹出对话框
BlueDestiny 2006-01-24
- 打赏
- 举报
还有个例子，你可以把window.event.cancelBubble=true注释掉看看效果
<SCRIPT LANGUAGE="JavaScript">
<!--
function alert1(s)
{
window.event.cancelBubble=true;
alert(s)
}
//-->
</SCRIPT>
<TABLE width="100%" height="97" border="1" cellpadding="0" cellspacing="0">
<TR onclick="alert1('tr')">
<TD onclick="alert1('td')"> </TD>
<TD onclick="alert1('td')"> </TD>
</TR>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function alert1(s)
{
window.event.cancelBubble=true;
alert(s)
}
//-->
</SCRIPT>
<TABLE width="100%" height="97" border="1" cellpadding="0" cellspacing="0">
<TR onclick="alert1('tr')">
<TD onclick="alert1('td')"> </TD>
<TD onclick="alert1('td')"> </TD>
</TR>
</TABLE>
BlueDestiny 2006-01-24
- 打赏
- 举报
说起来有点乱的，你看看下面这个例子吧，这个例子其实也是51js的万常华写的，很能说明bubble事件的
<SCRIPT LANGUAGE="JScript">
function checkCancel()
{
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc()
{
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
cancelBubble 示例：<br>
点击图片显示路径，按Shift点击不显示：<br>
<IMG onclick="checkCancel()" SRC="http://images.csdn.net/upimgs/20060124_760_90.jpg">
<SCRIPT LANGUAGE="JScript">
function checkCancel()
{
if (window.event.shiftKey)
window.event.cancelBubble = true;
}
function showSrc()
{
if (window.event.srcElement.tagName == "IMG")
alert(window.event.srcElement.src);
}
</SCRIPT>
<BODY onclick="showSrc()">
cancelBubble 示例：<br>
点击图片显示路径，按Shift点击不显示：<br>
<IMG onclick="checkCancel()" SRC="http://images.csdn.net/upimgs/20060124_760_90.jpg">
