2007年1月15日星期一

“取消”和“停止”浏览器事件

这种做法是从Bret Taylor的blog上面抄来的,原文地址在这里(好像是,不是也别怪我。)。对于避免ajax应用中不同层的事件干扰很有用的。


先说一下“取消(cancel)”和“停止(stop)”的区别:说白了,停止就是当事件发生后,阻止它自动冒泡到父容器内;而取消则是当冒泡发生到父容器之后停止,也就是不在当前元素中响应。天哪,这东西说起来话长了,代码说话:


function stopEvent(e) {
if (!e) e = window.event;
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
}

var link = document.getElementById("link");
link.onclick = stopEvent;

以上这一段是阻止父容器事件的


function cancelEvent(e) {
if (!e) e = window.event;
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
}

var link = document.getElementById("link");
link.onclick = function(e) {
cancelEvent(e);
stopEvent(e);
}

以上这一段是阻止子元素事件的


例子地址在这里:demo

没有评论: