js 事件体

最新推荐文章于 2020-05-31 16:05:37 发布

奋斗的小小骚年

最新推荐文章于 2020-05-31 16:05:37 发布

阅读量170

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41654985/article/details/79781218

版权

JavaScript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div
        {
            width: 50px;
            height: 50px;
            background-color: greenyellow;
            margin: 0 10px;
            float: left;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
<script>
    /*var div0=document.getElementById("div0");
    div0.addEventListener("click",clickHandler);
    function clickHandler(e) {
        console.log(e);
    }*/
    /*
    * 根据div获取div列表为divs
    * 设置变量数组selectDiv是一个空数组
    * 循环divs列表，设置每一个div做点击侦听事件
    * 给每个div增加一个属性index，为这个div的索引标识，后面用来区分前后关系
    *
    *
    * */
    var divs=document.getElementsByTagName("div");
    var selectDiv=[];
    for(var i=0;i<divs.length;i++){
        divs[i].addEventListener("click",clickHandler);
        divs[i].index=i;
    }

    /*
    * 点击div以后做内容判断
    *  1、如果e.ctrlKey是真，表示按着Ctrl点击的div
    *     这个操作我们需要把新的div添加入选中的div数组中
    *     1）、如果当前点击的div在选中的数组中存在时
    *          从选中的div列表中删除当前点击的div
    *          设置当前点击的div无边框
    *          跳出函数
    *      2）、如果在选中的列表中没有当前点击的div时，
    *          把当前的div添加在选中列表中
    *          并且设置当前div的边线是1像素
    *  2、如果e.shiftKey是真，表示按着shift点击的div
    *     这个操作我们需要把第一个被选中的div到当前点击的div都选中
    *     1）、先把选中的div列表中所有div按照index属性排序，从小到大
    *         因为考虑到我们多选点选时可能第一个并不是最前面的，可能是从后选得
    *      2）因为做了从小到大的排序，因此我们取出第0项的index就是最小的索引项
    *      3）获取当前点击的div的索引值。从最小的索引值到我们当前点击的div中间的所有div被选中
    *      4)先清除所有被选中的div
    *      5）如果最小索引项大于当前点击的索引，循环divs列表，从当前点击项到最小索引项都被选中（添加到选中数组中，并且加边框）
    *      6）如果最小索引小于当前点击的索引，循环divs列表，从最小索引项到当前点击项都被被选中（添加到选中数组中，并且加边框）
    *      7）如果最小项等于当前点击项，仅选中当前点击项，其它清除（添加到选中数组中，并且加边框）
    *  3、直接点击，这种操作是单选
    *     1、先清除所有被选中的div
    *     2、把当前被点击的添加入选择列表中
    *     3、加边线
    *
    * */
    function clickHandler(e) {
        if(e.ctrlKey){
            if(selectDiv.indexOf(this)>-1){
                selectDiv.splice(selectDiv.indexOf(this),1);
                this.style.border="none";
                return;
            }
            selectDiv.push(this);
            this.style.border="1px solid #000000";
        }else if(e.shiftKey){
            selectDiv.sort(function (a,b) {
                return a.index-b.index;
            });
            var index=selectDiv[0].index;
            var lastIndex=this.index;
            clearAll();
            if(index>lastIndex){
                for(var i=lastIndex;i<=index;i++){
                    divs[i].style.border="1px solid #000000";
                    selectDiv.push(divs[i]);
                }
            }else if(index<lastIndex){
                for(var j=index;j<=lastIndex;j++){
                    divs[j].style.border="1px solid #000000";
                    selectDiv.push(divs[j]);
                }
            }else{
                this.style.border="1px solid #000000";
                selectDiv.push(this);
            }

        }else{
            /*if(selectDiv===this) return;
            if(selectDiv){
                selectDiv.style.border="none";
            }
            selectDiv=this;*/
            if(selectDiv===this) return;
            clearAll();
            selectDiv.push(this);
            this.style.border="1px solid #000000";
        }
    }

    /*
    *  清除所有函数
    *     循环selectDiv，这是所有选中div的列表
    *     让所有选中的div的border都设置为none，不加边线
    *     设置数组的length=0
    *     是最快的清除数组的方法
    *
    * */
    function clearAll() {
        for(var i=0;i<selectDiv.length;i++){
            selectDiv[i].style.border="none";
        }
        selectDiv.length=0;
    }
</script>
</body>
</html>

奋斗的小小骚年

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js 事件体

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; div {
复制链接

扫一扫

专栏目录