Javascript事件冒泡和捕捉的阻止
<!DOCTYPE html>
<html>
<head>
<title>捕捉和冒泡</title>
<meta charset="utf-8">
</head>
<body>
<style>
#china{
width:500px;
height: 500px;
}
div{
border: 1px solid #333;
width:80%;
height: 80%;
margin: 10%;
}
</style>
<div id="china">
我是中国区域
<div id="shanxi">
我是陕西区域
<div id="xian">
我是西安区域
</div>
</div>
</div>
<script>
//获取中国,陕西,西安三大对象
var china =document.getElementById('china');
var shanxi=document.getElementById('shanxi');
var xian =document.getElementById('xian');
//第三个参数,是否捕捉,默认值是false,不捕捉即默认为冒泡【目前是捕捉模式】
// china.addEventListener('click',function(){console.log('China')},true);
// shanxi.addEventListener('click',function(){console.log('Shanxi')},true);
// xian.addEventListener('click',function(){console.log('Xian')},true);
//第三个参数,是否捕捉,默认值是false,不捕捉即默认为冒泡【目前是冒泡模式】
china.addEventListener('click',function(){console.log('China')},false);
shanxi.addEventListener('click',function(ev){
console.log('Shanxi');
ev.stopPropagation();
},false);
xian.addEventListener('click',function(){console.log('Xian')},false);
</script>
</body>
</html>
【主要方法】:stopPropagation() “Javascript事件冒泡和捕捉的阻止” 的相关文章
Javascript封装的原生Ajax请求
由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称) exam...
Javascript-WebSql的用法
WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!-- 三个核心方法 ...
阻止表单提交刷新页面
<form action="save.php" method="post" target="nm_iframe"> &nbs...
Javascript绑定事件和移除事件
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...
js获取当前位置信息, js获取当前位置经纬度
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body>...