点击冒泡的问题

cloudgamer 2008-12-23 08:52:53



<div style="width:100px; height:100px; background-color:#CCC;" onclick="alert(1)" >



<div style="width:50px; height:50px; background-color:#C11;" onclick="event.stopPropagation?event.stopPropagation():(event.cancelBubble=true);">

</div>



</div>

如果只在里面的div点击是可以取消冒泡
但如果我在里面的div点然后拖到外面的div松开还是会触发外面的onclick（外面拖动里面也一样）
这个怎么解决
（ff没有这个问题）

...全文

201 27 打赏收藏转发到动态举报

写回复

用AI写文章

27 条回复

切换为时间正序

请发表友善的回复…

发表回复

muxrwc 2008-12-23

打赏
举报

呃.刚刚测了下...
ff如果down和up不是一个对象,就会把所有的click事件处理掉...
这个貌似是唯一的不同了...

IE里从mouseup里写alert竟然可以河蟹掉所有的click,真的好神奇...

JK_10000 2008-12-23

打赏
举报

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

cloudgamer 2008-12-23

打赏
举报

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

muxrwc 2008-12-23

打赏
举报

而且捕获也解析不了从外面div拖到里面div也会触发onclick 

我觉得根本的问题是只要点击是在对象内部包括内部其他对象内完成就会触发onclick

什么意思.刚没看清.
貌似从外面down后挪近来释放默认就不会触发里面的click但是会触发up.
这样很合理吧.

JK_10000 2008-12-23

打赏
举报

<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

zjsfdxbao 2008-12-23

打赏
举报

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

cloudgamer 2008-12-23

打赏
举报

[Quote=引用 19 楼 zowell 的回复:]
cloudgamer 你进死胡同了．
[/Quote]

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

手写 2008-12-23

打赏
举报

cloudgamer 你进死胡同了．

cloudgamer 2008-12-23

打赏
举报

[Quote=引用 17 楼 muxrwc 的回复:]
引用
而且捕获也解析不了从外面div拖到里面div也会触发onclick
我觉得根本的问题是只要点击是在对象内部包括内部其他对象内完成就会触发onclick

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

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

muxrwc 2008-12-23

打赏
举报

引用

而且捕获也解析不了从外面div拖到里面div也会触发onclick
我觉得根本的问题是只要点击是在对象内部包括内部其他对象内完成就会触发onclick

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

dashi99 2008-12-23

打赏
举报

跟踪定位一下

cloudgamer 2008-12-23

打赏
举报

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

cloudgamer 2008-12-23

打赏
举报

而且捕获也解析不了从外面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仍然会触发

手写 2008-12-23

打赏
举报

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

cloudgamer 2008-12-23

打赏
举报

<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的机制问题

muxrwc 2008-12-23

打赏
举报

是鼠标捕获问题...
就是说你触发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>

cloudgamer 2008-12-23

打赏
举报

郁闷
为什么取消冒泡会失败呢

手写 2008-12-23

打赏
举报

是触发的顺序不一样．
句柄按照从外向里的顺序加载．
我也弄了个土办法　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>