2018/2/9 简单冒泡机制

最新推荐文章于 2023-08-25 16:15:59 发布

maggie_xff

最新推荐文章于 2023-08-25 16:15:59 发布

阅读量135

点赞数

本文链接：https://blog.csdn.net/sinat_38589469/article/details/79301794

版权

简单冒泡机制

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

顺序

E 6.0:

div -> body -> html -> document

其他浏览器:

div -> body -> html -> document -> window

不是所有的事件都能冒泡。以下事件不冒泡：blur、focus、load、unload

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浏览器
   }

2) 小案例点击空白处隐藏盒子

这个案例就是说，一个盒子，点击除了自己之外的任何一个地方，就会隐藏。

原理：

点击自己不算 ( 怎么证明我是我点击的这个对象id 正好和自己一样 )

点击空白处就是点击 document

3) 判断当前对象

火狐谷歌等 event.target.id

ie 678 event.srcElement.id

兼容性写法：
var targetId = event.target ? event.target.id : event.srcElement.id;

targetId != "show"

代码：

<!DOCTYPE html>
<html>
<head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            body {
                    height:2000px;
                }
            #mask {
                                width: 100%;
                                height: 100%;
                                opacity: 0.4;   /*半透明*/
                                filter: alpha(opacity = 40);  /*ie 6半透明*/
                                background-color: black;
                                position: fixed;
                                top: 0;
                                left: 0;
                                display: none;
                            }
            #show {
                                width: 300px;
                                height: 300px;
                                background-color: #fff;
                                position: fixed;
                                left: 50%;
                                top: 50%;
                                margin: -150px 0 0 -150px;
                                display: none;
                            }
        </style>
    </head>
<body>
<a href="javascript:;" id="login">注册</a>
<a href="javascript:;">登录</a>
<div id="mask"></div>
<div id="show"></div>
</body>
</html>
<script>
       function $(id) { return document.getElementById(id);}
       var login = document.getElementById("login");
       login.onclick = function(event) {
               $("mask").style.display = "block";
               $("show").style.display = "block";
               document.body.style.overflow = "hidden";  // 不显示滚动条
               //取消冒泡
               var event = event || window.event;
               if(event && event.stopPropagation)
                   {
                       event.stopPropagation();
                   }
               else
               {
                       event.cancelBubble = true;
                   }
            }
       document.onclick = function(event) {

               var event = event || window.event;
               // alert(event.target.id);  // 返回的是点击的某个对象的id 名字
               // alert(event.srcElement.id);
               var targetId = event.target ? event.target.id : event.srcElement.id;
               // 看明白这个写法
               if(targetId != "show")  // 不等于当前点点击的名字
                   {
                       $("mask").style.display = "none";
                       $("show").style.display = "none";
                       document.body.style.overflow = "visible"; // 显示滚动条
                   }
            }
    </script>

4) 选中之后，弹出层

我们想，选中某些文字之后，会弹出一个弹出框

这个和我们前面讲过的拖拽有点不一样。

拖拽是拖着走。拉着鼠标走。

选择文字：这个弹出的层选中的时候不出来，弹起鼠标的时候才出现。

所以这个的事件一定是 onmouseup . 盒子显示而且盒子的位置再鼠标的clientX 和 clientY 一模一样

用来判断选择的文字：

5) 获得用户选择内容

window.getSelection()     标准浏览器
document.selection.createRange().text;      ie 获得选择的文字

兼容性的写法：
if(window.getSelection)
{
txt = window.getSelection().toString();   // 转换为字符串
}
else
{
txt = document.selection.createRange().text;   // ie 的写法
}

综合代码：

<!DOCTYPE html>
<html>
<head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            div {
                    width: 400px;
                    margin:50px;
                }
            #demo {
                                width: 100px;
                                height: 100px;
                                background-color: pink;
                                position: absolute;
                                top: 0;
                                left: 0;
                                display: none;
                            }
        </style>
    </head>
<body>
<span id="demo"></span>
<div id="test">我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要
    复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复
    制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制
    的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字我要复制的文字</div>
<div id="another">
        我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
    我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
    我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字 我不要的文字
    </div>
</body>
</html>
<script>
       function $(id) {return document.getElementById(id)}
       $("test").onmouseup = function(event) {
               var event = event || window.event;
               var x = event.clientX;  //  鼠标的x坐标
               var y = event.clientY;  //  同理
               var txt;  // 用于存贮文字的变量
               if(window.getSelection)  // 获取我们选中的文字
                   {
                       txt = window.getSelection().toString();   // 转换为字符串
                   }
               else
               {
                      txt = document.selection.createRange().text;   // ie 的写法
                  }
           if(txt)   // 所有的字符串都为真  "" 是假    所有的数字为真  0  为假
                  {
                      //看看有没有选中的文字，没有选中文字为空的，就不应该执行   点击一下鼠标 就是空的
                      showBox(x,y,txt);  // 调用函数
                  }
            }
       document.onclick = function(event) {  // 点击空白处隐藏
               var event = event || window.event;
               var targetId = event.target ? event.target.id : event.srcElement.id;
               if(targetId != "demo"){
                       $("demo").style.display = "none";
                   }
            }
       function showBox(mousex,mousey,contentText) {  // 相关操作
                  setTimeout(function(){
                          $("demo").style.display = "block";
                          $("demo").style.left = mousex + "px";
                          $("demo").style.top = mousey + "px";
                          $("demo").innerHTML = contentText;
                      },300);
            }
    </script>

maggie_xff

关注

0
点赞
踩
1

收藏

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

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

扫一扫