事件冒泡: 当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。
顺序
E 6.0:
div -> body-> html -> document
其他浏览器:
div -> body-> html -> document -> window
不是所有的事件都能冒泡。以下事件不冒泡:blur、focus、load、unload
1.1.1 阻止冒泡的方法
标准浏览器 和 ie浏览器
w3c的方法是event.stopPropagation() proPagation 传播 传递
IE则是使用event.cancelBubble = true bubble 冒泡 泡泡 cancel 取消
兼容的写法:
if(event && event.stopPropagation)
{
event.stopPropagation(); // w3c标准
}
else
{
event.cancelBubble = true; // ie 678 ie浏览器
}
1.1.2 小案例 点击空白处隐藏盒子
这个案例就是说,一个盒子,点击除了自己之外的任何一个地方,就会隐藏。
1.1.3判断当前对象
火狐谷歌 等 event.target.id
ie 678 event.srcElement.id
兼容性写法:
var targetId = event.target ? event.target.id : event.srcElement.id;
targetId != "show"
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 body {
8 height:2000px;
9 }
10 #mask {
11 width: 100%;
12 height: 100%;
13 opacity: 0.4; /*半透明*/
14 filter: alpha(opacity = 40); /*ie 6半透明*/
15 background-color: black;
16 position: fixed;
17 top: 0;
18 left: 0;
19 display: none;
20 }
21 #show {
22 width: 300px;
23 height: 300px;
24 background-color: #fff;
25 position: fixed;
26 left: 50%;
27 top: 50%;
28 margin: -150px 0 0 -150px;
29 display: none;
30 }
31 </style>
32 </head>
33 <body>
34 <a href="javascript:;" id="login">注册</a>
35 <a href="javascript:;">登录</a>
36 <div id="mask"></div>
37 <div id="show"></div>
38 </body>
39 </html>
40 <script>
41 function $(id) { return document.getElementById(id);}
42 var login = document.getElementById("login");
43 login.onclick = function(event) {
44 $("mask").style.display = "block";
45 $("show").style.display = "block";
46 document.body.style.overflow = "hidden"; // 不显示滚动条
47 //取消冒泡
48 var event = event || window.event;
49 if(event && event.stopPropagation)
50 {
51 event.stopPropagation();
52 }
53 else
54 {
55 event.cancelBubble = true;
56 }
57 }
58 document.onclick = function(event) {
59
60 var event = event || window.event;
61 // alert(event.target.id); // 返回的是点击的某个对象的id 名字
62 // alert(event.srcElement.id);
63 var targetId = event.target ? event.target.id : event.srcElement.id;
64 // 看明白这个写法
65 if(targetId != "show") // 不等于当前点点击的名字
66 {
67 $("mask").style.display = "none";
68 $("show").style.display = "none";
69 document.body.style.overflow = "visible"; // 显示滚动条
70 }
71 }
72 </script>
1.1.4 获得用户选择内容
window.getSelection() 标准浏览器
document.selection.createRange().text; ie 获得选择的文字
兼容性的写法:
if(window.getSelection) { txt = window.getSelection().toString(); // 转换为字符串 } else { txt = document.selection.createRange().text; // ie 的写法 }
综合代码:
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 <style>
7 div {
8 width: 400px;
9 margin:50px;
10 }
11 #demo {
12 width: 100px;
13 height: 100px;
14 background-color: pink;
15 position: absolute;
16 top: 0;
17 left: 0;
18 display: none;
19 }
20 </style>
21 </head>
22 <body>
23 <span id="demo"></span>
24 <div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
25 <div id="another">
26 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
27 </div>
28 </body>
29 </html>
30 <script>
31 function $(id) {return document.getElementById(id)}
32 $("test").onmouseup = function(event) {
33 var event = event || window.event;
34 var x = event.clientX; // 鼠标的x坐标
35 var y = event.clientY; // 同理
36 var txt; // 用于存贮文字的变量
37 if(window.getSelection) // 获取我们选中的文字
38 {
39 txt = window.getSelection().toString(); // 转换为字符串
40 }
41 else
42 {
43 txt = document.selection.createRange().text; // ie 的写法
44 }
45 if(txt) // 所有的字符串都为真 "" 是假 所有的数字为真 0 为假
46 {
47 //看看有没有选中的文字,没有选中文字为空的,就不应该执行 点击一下鼠标 就是空的
48 showBox(x,y,txt); // 调用函数
49 }
50 }
51 document.onclick = function(event) { // 点击空白处隐藏
52 var event = event || window.event;
53 var targetId = event.target ? event.target.id : event.srcElement.id;
54 if(targetId != "demo"){
55 $("demo").style.display = "none";
56 }
57 }
58 function showBox(mousex,mousey,contentText) { // 相关操作
59 setTimeout(function(){
60 $("demo").style.display = "block";
61 $("demo").style.left = mousex + "px";
62 $("demo").style.top = mousey + "px";
63 $("demo").innerHTML = contentText;
64 },300);
65 }
66 </script>