学js的第十六天

1.键盘及滚轮事件

1.1键盘事件

• onkeydown

  • 键盘按下的时候触发，键盘上任何一个键都可以触发该事件 不区分大小写 返回的是大写的字符编码

• onkeyup

  • 键盘抬起的时候触发

• onkeypress

  • 键盘按下的时候触发 键盘上的特殊字符无法触发该事件 区分大小写 返回的是大写和小写的字符编码

    document.documentElement.onkeydown = function(eve){
            var ev = window.event|| eve
            console.log("按下");
            console.log(ev.key);//标准浏览器： 键盘上具体的字符  IE低版本：undefined
            console.log(ev.keyCode);// ASCII码 不区分大小写，返回大写的字符编码
        }
        document.documentElement.onkeyup = function(){
            console.log("抬起")
        }
        document.documentElement.onkeypress = function(eve){
            var ev = window.event || eve;
            console.log(ev.key);// 键盘上具体的字符
            console.log(ev.keyCode);//ASCII码 区别大小写  但是不能输出特殊字符
        }
    

1.2滚轮事件

• 添加滚轮事件

  • 标准浏览器/IE浏览器：元素.onmousewheel

  • 火狐浏览器：元素.DOMMouseScroll

• 获取滚轮的方向

  • 标准浏览器/IE浏览器：ev.wheelDelta

    • 向前 180/120 >0

    • 向后 -180/-120 <0

  • 火狐浏览器 ev.detail

    • 向前 -3 <0

    • 向后 3 >0

      //标准浏览器绑定滚轮事件
        document.documentElement.onmousewheel = function (eve) {
            var ev = window.event || eve;
            if(ev.wheelDelta > 0){
                console.log("向前")
            }else if(ev.wheelDelta<0){
                console.log("向后")
            }
            console.log("标准浏览器和IE",ev.wheelDelta);
        }
        //火狐浏览器绑定滚轮事件    addEventListener在IE低版本下不兼容 
        if (document.documentElement.addEventListener) {
            document.documentElement.addEventListener("DOMMouseScroll", function (eve) {
                var ev = window.event || eve;
                if(ev.detail <0){
                    console.log("向前")
                }else if(ev.detail>0){
                    console.log("向后")
                }
                console.log("火狐浏览器",ev.detail)
            })
        }

• 滚轮事件函数兼容

  function mousewheel(elem, upFunction, downFunction) {
            function scroll(eve) {
                var ev = window.event || eve;
                var tag = true;// true向前  false向后
                // 判断滚轮的方向
                if (ev.wheelDelta) { //标准浏览器的滚轮方向  180/120 向前  -180/-120 向后
                    tag = ev.wheelDelta > 0 ? true : false
                } else {//火狐浏览器的滚轮方向  -3向前  3向后
                    tag = ev.detail < 0 ? true : false
                }
​
                if (tag) { //滚轮向前做的事情
                    upFunction();
                } else { //滚轮向后做的事情
                    downFunction();
                }
            }
            // 标准浏览器添加滚轮事件
            elem.onmousewheel = scroll
            // 火狐浏览器添加滚轮事件
            if (elem.addEventListener) {
                elem.addEventListener("DOMMouseScroll", scroll)
            }
        }

2.拖拽效果

• 实现效果：在页面中拖动盒子 鼠标在哪 盒子就在哪

• 问题1：在div内部按下鼠标失效

• 问题2：在拖动盒子之前不小心选择了文字，在不取消选中文字的情况下又去拖动盒子 会发现拖动是文字内容

  • 原因：文字默认行为的问题

  • 解决：阻止默认行为

3.IE的全局捕获

• 什么是IE的全局捕获

  • 全局捕获：当在页面中执行事件的时候 添加全局捕获的元素会截取事件 触发自己的东西

• 给元素设置全局捕获：元素.setCapture();

• 元素释放全局捕获：元素.releaseCapture();

4.碰撞检测

• 判断水平方向的危险区域 假设拖拽盒子水平方向的位置值 l

  • 危险区域 a < l < b

  • 大盒子的offsetLeft - 小盒子的offsetWidth < l < 大盒子的offsetLeft + 大盒子的offsetWidth

• 判断垂直方向的危险区域 假设拖拽盒子垂直方向的位置 t

  • 危险区域 x < t < y

  • 大盒子的offsetTop - 小盒子的offsetHeight < t < 大盒子的offsetTop + 大盒子的offsetHeight

   
大盒子危险区域
   
小盒子