以文本方式查看主题 - ╋艺 镇╋ (http://wdystv.com/bbs/index.asp) -- ┣◇网站建设&Web语言 (http://wdystv.com/bbs/list.asp?boardid=4) ---- 关于event.cancelBubble的描述 (http://wdystv.com/bbs/dispbbs.asp?boardid=4&id=2373) |
-- 作者:乐魔舞 -- 发布时间:2010/10/14 11:33:40 -- 关于event.cancelBubble的描述 由于HTML中的对象都是层次结构,比如一个Table包含了多个TR,一个TR包含了多个TD. Bubble就是一个事件可以从子节点向父节点传递,比如鼠标点击了一个TD,当前的event.srcElement就是这个TD,但是这种冒泡机制使你可以从TR或者Table处截获这个点击事件,但是如果你event.cancelBubble,则就不能上传事件。 举个简单的例子: 比如你没有用CSS,但是想同意改变你的页面上的所有按钮的属性,你可以在页面load完毕后使用在body中使用onmouseover方法统一改变鼠标在按钮上和离开后的style,而不用对每个按钮都写一边。 更加精准的描述 a lot of events are passed upward through the DOM object structure, but you can use event.cancelBubble=true to stop this "bubbling". For example, if you click on the following button, the alert message boxes in both the button\'s onclick event handler and the document\'s onclick event handler will be displayed. But if you uncomment the cancelBubble line, you will only see the alert box in the button\'s event handler get displayed: 程序如下: <script language="javascript"> function document.onclick() { alert("in the document\'s event handler!"); }
function clickMe() { alert("in the button\'s event handler!"); //event.cancelBubble = true; } </script> <input type="button" value="click me" > < span> 例: <html><head> <meta http-equiv="Content-Type" c> <meta name="Keywords" c> <title>event.cancelBubble-</title><body> <span onclick=alert("你好")>点我 <span>再点我</span></span><br><br> <span onclick=alert("你好")>点我 <span onclick=event.cancelBubble=true;>再点我</span></span> <div style="position: absolute; top: 10; right: 10; width: 148; height: 18;cursor:hand"> <input type="button" name="Button" value="查看源代码" ></div> </body> </html> |
-- 作者:乐魔舞 -- 发布时间:2010/10/14 15:04:20 -- 案例二: 下面的代码片断演示了当在图片上点击(onclick)时,如果同时shift键也被按下,就取消上层元素(body)上的事件onclick所引发的showSrc()函数。 <!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" c /> <title>无标题文档</title> </head> <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 > <IMG src="http://www.zyzsky.com/bbs.gif"> </body> </html> |