js 阻止元素（文档）默认事件，阻止冒泡事件

来源：互联网发布：淘宝一年营业额编辑：程序博客网时间：2024/06/04 19:17

1、阻止表单的默认事件，或者在html5中文档滑动的默认事件【event.preventDefault();】 -- 阻止元素的默认事件。

demo1-1：阻止元素类默认事件

document.getElementByTagName("a").addEventListener("click",function(e){e.preventDefault()},false);

点击链接的时候正常情况下会发生跳转，但是现在我们阻止了它的默认事件，即跳转事件，这时就不会跳转到百度了。

demo1-2：移动端中阻止document默认事件

document.ontouchmove = function(ev){
ev.preventDefault();
};

=========

2、-- 阻止元素冒泡事件【（ie：）ev.cancelBubble = true; （ff：） ev.stopPropagation(); 】；

demo:

<!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=utf-8" /><title>无标题文档</title><style type="text/css">*{padding: 0;margin: 0;}#beijing{width: 600px;height: 400px;background: purple;margin: 0 auto;}#chaoyang {width: 500px;height: 300px;background: orange;}#niaochao{width: 400px;height: 200px;background: green;}</style><script type="text/javascript">window.onload = function(){document.getElementById('beijing').onclick = function(){alert('我是北京')}document.getElementById('chaoyang').onclick = function(e){alert('我是朝阳区')var ev = window.event || e;if(document.all){//阻止事件流ev.cancelBubble = true;}else{ev.stopPropagation();}}document.getElementById('niaochao').onclick = function(){alert('我是鸟巢')}}</script></head><body><div id="beijing"><div id="chaoyang"><div id="niaochao"></div></div></div></body></html>

1 0