简单冒泡机制

最新推荐文章于 2021-01-13 11:31:25 发布

口耳戈是个生僻字

最新推荐文章于 2021-01-13 11:31:25 发布

阅读量209

点赞数

分类专栏： javascript知识点

本文链接：https://blog.csdn.net/qq_37199582/article/details/79398268

版权

javascript知识点专栏收录该内容

22 篇文章 0 订阅

订阅专栏

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到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>

口耳戈是个生僻字

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单冒泡机制

事件冒泡: 当一个元素上的事件被触发的时候，比如说鼠标点击了一个按钮，同样的事件将会在那个元素的所有祖先元素中被触发。这一过程被称为事件冒泡；这个事件从原始元素开始一直冒泡到DOM树的最上层。顺序E 6.0: div -&gt; body-&gt; html -&gt; document其他浏览器: div -&gt; body-&gt; html -&gt; document -&gt; win...
复制链接

扫一扫