点击冒泡的问题

我要的效果是只有mousedown和mouseup都在外面div时才触发onclick就是ff那样

提供一个思路,把onclick拆成两个,而只有当up和down都起作用在外层时才做你要做的事情<script>var sff=false;</script>
<div style="width:100px; height:100px; background-color:#CCC;" onmousedown="sff=true;" onmouseup="if(sff)alert(1);sff=false;" ><div style="width:50px; height:50px; background-color:#C11;" onmousedown="sff=false;event.stopPropagation?event.stopPropagation():(event.cancelBubble=true);" onmouseup="sff=false;event.stopPropagation?event.stopPropagation():(event.cancelBubble=true);">
</div></div>

看看这个
http://fasterwind.spaces.live.com/Blog/cns!D3B9A037EF9FF2CF!480.entry
IE跟其他浏览器的事件机制是不太一样的

这种方式我这里也有一个
有没有更好的解决方法
最好是不用修改原来的onclick不然就麻烦了

是触发的顺序不一样．
句柄按照从外向里的顺序加载．
我也弄了个土办法　up和down共同控制click<div style="width:100px; height:100px; background-color:#CCC;" id="overdiv" ><div style="width:50px; height:50px; background-color:#C11;" onclick="event.stopPropagation?event.stopPropagation():(event.cancelBubble=true);">
</div></div>
<script>function Action(){
this.dclick=0;
this.onClick=function(ev){
if(!this.dclick){alert(111)}
}
this.onMouseDown=function(ev){
ev =ev || window.event;
var target = ev.target || ev.srcElement;
if(target.id=="overdiv"){this.dclick=1;}else{this.dclick=0;}
}
this.onMouseUp=function(ev){
ev =ev || window.event;
var target = ev.target || ev.srcElement;
if(target.id=="overdiv"){this.dclick=!this.dclick;}
}
}
try{var ac=new Action();}catch(e){alert(e.description)}
(function(){
var od=document.getElementById("overdiv");
od.onclick=new Function ("return ac.onClick();")
od.onmousedown=new Function ("return ac.onMouseDown();");
od.onmouseup=new Function ("return ac.onMouseUp();") ;
})()
</script>

是鼠标捕获问题...
就是说你触发div的onmousedown后,div并没有鼠标捕获,所以你即使没有释放鼠标移动到div外,这时div没有鼠标捕获,鼠标就和它"没关系"了,所以它会触发外面的mouseup等...
原先不是说ff等默认鼠标捕获,而IE要手动一下么...
所以只要手动加上鼠标捕获即可...
方法如下...
<body onclick="alert(2)"><div style="width:100px; height:100px; background-color:#CCC;" onclick="alert(1)" ><div style="width:50px; height:50px; background-color:#C11;" onmouseup="this.onlosecapture()" onmousedown="var wc = this;this.setCapture();this.onlosecapture=function(){wc.onlosecapture=null;wc.releaseCapture();}" onclick="this.onlosecapture();event.stopPropagation?event.stopPropagation():(event.cancelBubble=true);">
</div></div>
</body>

<div style="width:100px; height:100px; background-color:#CCC;" onmousemove="document.getElementById('t').innerHTML+='1';"><div style="width:50px; height:50px; background-color:#C11;" onmousemove="event.stopPropagation?event.stopPropagation():(event.cancelBubble=true);">
</div></div><div id="t"></div>但onmousemove就可以哦
我觉得是ie的onclick的机制问题

onclick是两个事件的和onmousemove onmouseout onmouseover onmousedown onmouseup就只有一个事件。
小弟估计onclick是依赖对onmousedown onmouseup两个句柄的监听。
正如王好奇所说

而且捕获也解析不了从外面div拖到里面div也会触发onclick
我觉得根本的问题是只要点击是在对象内部包括内部其他对象内完成就会触发onclick
<div style="width:100px; height:100px; background-color:#CCC;" onclick="alert(1)" ><div style=" height:50px; background-color:#C11;" >
</div>
<div style=" height:50px; background-color:#111;" >
</div></div>像这段点上面div拖到下面div放即使完全碰不到外面的div仍然会触发

而ff就认为只有点和放都在同一个对象内完成才会触发onclick

那就点什么捕获什么...
给document.onmousedown加一个对event.srcElement的鼠标捕获...即可.
注意控制释放和兼容就好...

这样的话跟click就又不同了
click虽然内部有问题但对于外部元素还是正常的
这样一捕获就....

呵呵是吗
研究研究而已
其实我的问题已经解决了
只是想找有没有更好的方法
顺便研究一下onclick

哎,IE毛糙的处理onclick,认了吧

<div id=wrap>
<div id=inner1>
<div>
<div id=inner2>
<div>
</div>一次配对的mousedown/mouseup，构成一次click.
所以：
A---在inner1里mousedown/mouseup，会触发inner1的click，也会触发wrap的click,
B---在inner1里mousedown,在inner2里mouseup,会触发wrap的click，但是却不会触发inner1或inner2里的click

而且捕获也解析不了从外面div拖到里面div也会触发onclick
我觉得根本的问题是只要点击是在对象内部包括内部其他对象内完成就会触发onclick
什么意思.刚没看清.
貌似从外面down后挪近来释放默认就不会触发里面的click但是会触发up.
这样很合理吧.

就是说ie认为点击的点和放可以在不同的元素
而ff就认为点击的点和放只能在同一个元素内才有效

是的，ie特立独行，不过我觉得IE的处理更合理一点

呃.刚刚测了下...
ff如果down和up不是一个对象,就会把所有的click事件处理掉...
这个貌似是唯一的不同了...IE里从mouseup里写alert竟然可以河蟹掉所有的click,真的好神奇...

调试易

点击冒泡的问题

解决方案 »