21-第二十一章 addEventLitener 默认事件 滚轮事件

五、默认事件

标准
e.prevenDefault() prevent /prɪ'vent/ 阻止，防止

低版本IE
e.returnValue = false;

右键菜单 : oncontextmenu
标准：解决办法 return false (阻止默认事件) （只能阻止 dom0 级别）
非标准 ie：全局捕获

1、onselectstart="return false" 处理文字选中

解决：文字选中的问题

        document.onselectstart = function (e) {
            e = e || window.event;

            if (e.preventDefault) { // 存在这个函数，主流
                e.preventDefault();
            } else { // 不存在低版本IE
                e.returnValue = false;
            }

            // 此方法也可以阻止默认文字默认选中行为
            // return false;
        }

2、添加ondragstart="return false" 处理图片拖动

标准下阻止默认事件，不可以拖拽图片啦

        document.ondragstart = function (e) {
            e = e || window.event;
            if (e.preventDefault) { // 存在这个函数，主流
                e.preventDefault();
            } else { // 不存在低版本IE
                e.returnValue = false;
            }

            // 此方法也可以阻止默认文字默认选中行为
            // return false;
        }

兼容 阻止默认行为

        document.oncontextmenu = function (e) {
            e = e || window.event;

            if (e.preventDefault) { // 存在这个函数，主流
                e.preventDefault();
            } else { // 不存在低版本IE
                e.returnValue = false;
            }
            console.log('右键触发')
           
            // return false;
        }

六、鼠标滚轮事件

主流浏览器 滚轮事件

Ie / chrome : onmousewheel

滚动方向

event.wheelDelta /'dɛltə/
向上滚动：120
向下滚动：-120

火狐浏览器 滚轮事件

firefox : DOMMouseScroll 必须用 addEventListener() 添加

滚动方向

fire: event.detail /dɪˈtel/ 细节
向上滚动：-3
向下滚动：3

滚轮属性：event.wheelDelta \ event.detail

兼容：

        //兼容ie chrome
        obj.onmousewheel = handle;
        
        //兼容firefox
        obj.addEventListener ? obj.addEventListener('DOMMouseScroll', handle, boolean) : false;   

        //滚动函数event对象处理
        function handle(e) {
            e = e || window.event;
            e.wheel = e.wheelDelta ? e.wheelDelta : -e.detail * 40;
        }

阻止默认事件：
标准：event.preventDefault()
非标准：event.returnValue = false;

return false 阻止的是 obj.on 事件名称 = fn 所触发的默认行为
addEventListener 绑定的事件需要通过 event 下面的event.preventDefault();
detachEvent 绑定的事件需要通过 event 下面的 event.returnValue=false;

鼠标滚轮与自定义滚动条结合

七、全兼容添加/删除事件 封装

        addEvent(document, 'mousewheel', function() {
            console.log(111132)
        })

        //注册事件
        function addEvent(obj, type, fn, boolean) {
            boolean = boolean || false;//处理捕获冒泡
            obj[type + fn.name] = handle;//添加方法
            obj.addEventListener ? obj.addEventListener(type, obj[type + fn.name], boolean) : obj.attachEvent('on' + type, obj[type + fn.name]);
            //滚轮事件
            if (type == 'mousewheel') {
                //obj['on'+type]= handle;//chrome 及ie
                obj.addEventListener ? obj.addEventListener('DOMMouseScroll', obj[type + fn.name], boolean) : '';//兼容火狐
            }

            //处理event对象
            function handle(e) {
                e = e || window.event;
                e.wheel = e.wheelDelta ? e.wheelDelta : e.detail * (-40);//处理滚轮方向

                fn.call(obj, e);
                e.preventDefault ? e.preventDefault() : e.returnValue = false;
            }
        }

        function removeEvent(obj, type, fn, boolean) {
            boolean = boolean || false;//处理捕获冒泡
            obj.removeEventListener ? obj.removeEventListener(type, obj[type + fn.name], boolean) : obj.detachEvent('on' + type, obj[type + fn.name]);
            //滚轮事件
            if (type == 'mousewheel') {
                obj.removeEventListener ? obj.removeEventListener('DOMMouseScroll', obj[type + fn.name], boolean) : '';//兼容火狐
            }
        }