client家族

最新推荐文章于 2023-04-26 16:26:53 发布

junlingshiwo

最新推荐文章于 2023-04-26 16:26:53 发布

阅读量326

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_45722135/article/details/108287743

版权

JS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

《1 client家族：

clientWidth和clientHeight：1 网页可见区域：document.body.clientWidth; document.body.clientHeight.

clientLeft和clientTop: 返回的元素边框的borderWidth。如果不指定一个边框或者不定位该元素，其值就为0.

2 offset ，client ， scroll的区别分析：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding: 20px;
            border: 10px solid #000000;
        }
        p{margin-bottom: 20px;}
    </style>
</head>
<body>
<div id="box">
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
    <p>我是MT</p>
</div>

<script>
    var box=document.getElementById('box');
    //《1 width和height分析
    //border + padding + 内容的宽度和高度
    //console.log(box.offsetWidth, box.offsetHeight);
    // padding + 内容的宽度和高度
    //console.log(box.clientWidth, box.clientHeight);
    // 里面能够滚动的内容的宽度和高度
    //console.log(box.scrollWidth, box.scrollHeight);


    //《2 left和top分析
    //offsetLeft:当前元素距离有定位的父盒子左边的距离   offsetTop:当前元素距离有定位的父盒子上边的距离
    console.log(box.offsetLeft, box.offsetTop);
    //clientLeft：左边边框的宽度   clientTop：上边边框的宽度
    console.log(box.clientLeft, box.clientTop);
    //scrollLeft:左边滚动的长度    scrollTop：上边滚动的长度
    console.log(box.scrollLeft, box.scrollTop);


</script>

</body>
</html>

《2 onresize:

1 概念：当窗口或框架的大小发生改变的时候就会调用； onresize一般被用于自适应页面布局等多屏幕适配场景。

2 基本使用：

《3 JS事件传递机制：

1 冒泡机制：气泡从水中开始往上升，由深到浅，升到最上边。在上升的过程中，气泡会经过不同深度层次的水。

2 注意：冒泡顺序：div----body----html----document----window

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

3 阻止冒泡方法：标准浏览器和IE浏览器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father{
            width: 600px;
            height: 600px;
            background-color: #0c80dc;
        }
    </style>
</head>
<body>
<div id="father">
    <button id="btn">点我</button>
</div>
<script >
    var father=document.getElementById('father');
    var btn=document.getElementById('btn');



    btn.addEventListener('click',function (ev) { //w3c标准
        //阻止冒泡
        if (event && event.stopPropagation){
            event.stopPropagation();
        }else { //IE系列 IE 678
            event.cancelBubble=true;
        }

        alert('点击了按钮');
    })

    father.addEventListener('click',function (ev) {
        //阻止冒泡
        if (event && event.stopPropagation){
            event.stopPropagation();
        }else { //IE系列 IE 678
            event.cancelBubble=true;
        }

        alert('点击了父标签');
    })

    // document.addEventListener('click',function (ev) {
    //     alert('点击了文档');
    // });





</script>

冒泡阶段可以阻止冒泡，但捕获阶段不可以阻止冒泡。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #father{
            width: 600px;
            height: 600px;
            background-color: #0c80dc;
        }
    </style>
</head>
<body>
<div id="father">
    <button id="btn">点我</button>
</div>

<script id="捕获阶段">
    /*
    element.addEventListener(event,function,useCapture)
    可选。布尔值，指定事件是否在捕获或冒泡阶段执行。


   可能值：
   true - 事件句柄在捕获阶段执行
   false - false -默认。 事件句柄在冒泡阶段执行
     */
    var father=document.getElementById('father');
    var btn=document.getElementById('btn');



    btn.addEventListener('click',function (ev) { //w3c标准

        alert('点击了按钮');
    },true)

    father.addEventListener('click',function (ev) {


        alert('点击了父标签');
    },true)

    document.addEventListener('click',function (ev) {
        alert('点击了文档');
    },true);

</script>
</body>
</html>

案例：蒙版效果

如图，我们点击立即登录，出现篮筐后，再点击篮筐转到其他页面。就是我们要实现的蒙版，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            width: 100%;
            height: 100%;
            height: 3000px;
        }
        #panel{
            width: 100%;
            height: 100%;
            background-color: #0f0f0f;
            position: absolute;
            left: 0;
            top: 0;
            /*透明度*/
            opacity:0.4;
            display: none;
        }
        #login{
            width: 300px;
            height: 300px;
            background-color: #0c80dc;
            border-radius: 5px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-150px,-150px);
            display: none;
        }
    </style>
</head>
<body>
<button id="btn">立即登录</button>
<div id="panel"></div>
<div id="login"></div>

<script src="js/MyFunc.js"></script>
<script>
    window.onload=function () {
        //1监听按钮点击
        $('btn').onclick=function (ev) {
            //阻止冒泡
            if (event && event.stopPropagation){
                event.stopPropagation();
            }else { //IE系列 IE 678
                event.cancelBubble=true;
            }

            //1.1显示面板和蒙版
            $('panel').style.display='block';
            $('login').style.display='block';

            //1.2隐藏滚动条
            document.body.style.overflow='hidden';
        }

        //2点击文档
        document.onclick=function (ev) {
            var e=ev||window.event;

            //2.1获取点击标签
            // console.log(e.target);
            var targetId=e.target ? e.target.id:e.srcElement.id;

            //2.2判断
            if(targetId !=='login'){
                $('panel').style.display='none';
                $('login').style.display='none';

                document.body.style.overflow='auto';
            }else {
                window.location.href = "http://www.baidu.com";
            }
        }


    }



</script>


</body>
</html>

《4 获取选中的内容

1 标准浏览器：window.getSelection().

2 ie获取选择的文字：document.selection.crwateRange().text

案例：

如图上所示，我们就是将选中的文字后，点击微博图标，再转换到微博中去发表。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        p{
            margin: 100px;width: 300px;
        }
        #share_wei_bo{
            width: 26px;
            height: 26px;
            background: url("images/share.gif");
            /*定位*/
            position: absolute;
            display: none;
        }
    </style>
</head>
<body>
<p id="word">
    春天是播种希望的季节，一颗颗破土而出的种子，正预示着新生命的到来。
    一颗颗小草探出头来，沐浴着春风，感受着天地间的变化，它们将在春天无尽的希望中茁壮成长，
    实现它们美好的愿望。春回大地，万象更新，一扫冬天的了无生机，处处洋溢着无限的希望。
    百灵鸟用嘹亮的歌声唤醒沉寂的大地。
    花儿们用色彩渲染大地，到处变得生机盎然，每一个角落里都流淌着春天的气息。
</p>
<div id="share_wei_bo"></div>
<script src="js/MyFunc.js"></script>
<script>
    window.onload=function (ev) {
        var selectedText='';
        //1监听鼠标松开
        $('word').onmouseup=function (ev1) {
            var e=ev1||window.event;
            //1.1获取选中文字
            if (window.getSelection()){ //标准模式 获取选中文字
                selectedText=window.getSelection().toString();
            }else { // IE 系列
                selectedText=document.selection().createRange().text;
            }

            //1.2显示面板
            if (selectedText.length!==0){
                $('share_wei_bo').style.display='block';
                //1.3处理图标位置
                $('share_wei_bo').style.left=e.pageX+'px';
                $('share_wei_bo').style.top=e.pageY+'px';


            }

        }

        //2监听文档点击
        document.onmousedown=function (ev2) {
            var e=ev2||window.event;

            //2.1获取点击的目标
            // console.log(e.target.id);
            var targetId=e.target ? e.target.id :e.srcElement.id;
            //2.2判断
            if (targetId !=='share_wei_bo'){
                $('share_wei_bo').style.display='none';
            }else { //微博转接点
                window.location.href = 'http://v.t.sina.com.cn/share/share.php?searchPic=false&title=' + selectedText + '&url=https://github.com/xuanzhihua';

            }


        }
    }
</script>

</body>
</html>