JavaScript-day16-----＞主要内容是鼠标事件；以及鼠标事件；鼠标的坐标；鼠标跟随；鼠标在盒子中跟随；盒子距离浏览器的距离

1.事件类型

事件类型：

        鼠标事件

        键盘事件

        表单事件

        其他事件

2.鼠标事件

click左键单击        dblclick左键双击

鼠标按下和抬起mousedown / mouseup （左键，中间键和右键都可以触发）

        注意：单击事件是包含了鼠标按下 + 抬起，专指鼠标左键

        e.button         0左键        /         1中间键（滑轮）        /        2右键

        

        鼠标移入，移出

        mouseover        /        mouseout         一对        支持事件冒泡

        mouseenter        /        mouseleave        一对        支持事件捕获        不建议使用

        鼠标移动        mousemove

css样式：

    <style>
        .a{
            width: 300px;
            height: 300px;
            background: red;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: #ff0;
        }
    </style>

body内容：

    <div class="box00">
        <div class="box01"></div>
    </div>
    <script>

        document.onclick = function(e) {
            console.log('click');
        }
        //   鼠标按下
        document.onmousedown = function(e) {
            console.log(e.button); 
            //0左键 / 1中间键 / 2右键
        }
        document.onmouseup = function(e) {
            console.log(111);   //111
        }

        var oBox00 = document.querySelector('.box00');
        var oBox01 = document.querySelector('.box01');
        //鼠标移入
        oBox00.onmouseover = function() {
            console.log('box00');
        }
        oBox01.onmouseover = function() {
            console.log('box01');
        }

        oBox00.onmouseenter = function() {
            console.log('Boox00');
        }
        oBox01.onmouseleave = function() {
            console.log('Boxx01');
        }

        oBox00.addEventListener('mousemove' , function() {
            console.log(88888);
        })
    </script>

3.鼠标的坐标

坐标需要用过事件对象才能拿到

距离浏览器的坐标        e.clientX / e.clientY        一般也写做 e.x / e.y

距离实际页面的坐标        e.pageX / e.pageY

距离目标源的坐标        e.offsetX / e.offsetY

css样式：

    <style>
        *{
            
            margin: 0;
        }
        body{
            width: 3000px;
            height: 3000px;
        }
        .a{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px;
        }


        .a1{
            width: 100px;
            height: 100px;
            background-color: gray;
            margin: 20px;

            
        }

    </style>

主要内容：

    <div class="b">
        <div class="b1"></div>
    </div>
    
    <script>
        var oB = document.querySelector('.b') ;
        oB.onclick = function(e) {
            //距离浏览器的距离
            console.log(e.clientX);
            console.log(e.clientY);

            console.log(e.pageX);
            console.log(e.pageY);

            console.log(e.x);
            console.log(e.y);

            // 距离离鼠标最近的盒子的坐标
            console.log(e.offsetX);
        }

    </script>

4.鼠标跟随

css样式：

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box1{
            width: 400px;
            height: 400px;
            background-color: skyblue;
            margin: 100px auto;
        }
        .b{
            width: 100px;
            height: 100px;
            background-color: slateblue;
            position: absolute;
            /* 
            cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状 
            	此光标指示某对象可被移动。
            */
            cursor: move;

        }
    </style>

主要内容：

        <div class="b"></div>
    

    <script>

        var oDiv = document.querySelector('.b');

        var oDivWidth = css(oDiv , 'width') ;
        console.log(oDivWidth);

        //取出字符串中的整数
        oDivWidth = parseInt(oDivWidth) ;

        var oDivHeight = parseInt(css(oDiv , 'height') ) ;

        var maxX = document.documentElement.clientWidth - oDivWidth ;
        console.log(maxX);
        var maxY = document.documentElement.clientHeight - oDivHeight ;

        //鼠标是在整个页面中移动
        document.onmousemove = function (e) {

            var x = e.x - oDivWidth / 2 ;
            var y = e.y - oDivHeight / 2 ;
            if(x > maxX){
                x = maxX ; 
            }
            if(y > maxY){
                y = maxY ; 
            }
            oDiv.style.left = x + 'px' ;
            oDiv.style.top = y + 'px' ;
        }


        //封装添加css属性
        function css(ele , prop) {
            if(window.getComputedStyle) {
                return getComputedStyle(ele)[prop];
            }
            return ele.currentStyle[prop];
        }
    </script>

5.鼠标在盒子中跟随

css样式：

    <style>
        .a{
            width: 600px;
            height: 600px;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: #f00;
        }
        .a1{
            width: 100px;
            height: 100px;
            background-color: #000;
            position: absolute;

            /* 事件禁用  相当于按钮上的disabled属性*/
            pointer-events: none;
        }
    </style>

body部分：

    <div class="a">
        <div class="a1"></div>
    </div>

    <script>

        // 重要属性介绍：pointer-events

        var oA = document.querySelector('.a') ;
        var oA1 = document.querySelector('.a1') ;



        // oA.onclick = function (e) {  
        //     console.log(e.target);  // 测试pointer-events这个属性
        // }

        console.log(oA); // null 
        var oA_width = parseInt(css(oA , 'width'));
        var oA_height = parseInt(css(oA  ,'height'))

        var oA1_width = parseInt(css(oA1 , 'width'));
        var oA1_height = parseInt(css(oA1  ,'height'))

        var maxX = oA_width - oA1_width ;
        var maxY = oA_height - oA1_height ;






        // document.onmousemove = function (e) {  
        //     var x = e.x - oA1_width / 2 - oA.offsetLeft ;
        //     var y = e.y - oA1_height / 2 - oA.offsetTop ;
        //     if(x < 0) x = 0 ;
        //     if(y < 0) y = 0 ;
        //     if(x > maxX) x = maxX ;
        //     if(y > maxY) y = maxY ;
        //     oA1.style.cssText = `left:${x}px ; top:${y}px` ;
        // }


        document.onmousemove = function (e) {  
            var x = e.offsetX - oA1_width / 2  ;
            var y = e.offsetY - oA1_height / 2 ;
            if(x < 0) x = 0 ;
            if(y < 0) y = 0 ;
            if(x > maxX) x = maxX ;
            if(y > maxY) y = maxY ;
            oA1.style.cssText = `left:${x}px ; top:${y}px` ;
        }


        function css(ele , prop) {  
            if(window.getComputedStyle) {
                return getComputedStyle(ele)[prop]
            }
            return ele.currentStyle[prop]
        }
    </script>

8.盒子距离浏览器的距离

css的样式：

    <style>
        *{
            margin: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: #000;
            margin-left: 100px;
            position: relative;
        }
        .a{
            width: 200px;
            height: 200px;
            margin-left: 100px;
            background-color: #f00;
        }
    </style>

body部分：

    <div class="box">
        <div class="a"></div>
    </div>

    <script>

        // offsetLeft 距离最近的具有定位的祖先元素的距离 ， 这个元素自身不需要定位
        // offsetTop 


        var oA = document.querySelector('.a') ;
        console.log(oA.offsetLeft);
    </script>