码迷,mamicode.com
首页 > Web开发 > 详细

【写一个自己的js库】 4.完善跨浏览器事件操作

时间:2015-08-31 01:05:42      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

1.阻止冒泡。

function stopPropagation(event){
        event = event || getEvent(event);
        if(event.stopPropagation){
            event.stopPropagation();
        }else{
            event.cancelBubble = true;
        }
    }
    Lily[‘event‘] = stopPropagation;

2.阻止事件默认动作。

function preventDefault(event){
        event = event || getEvent(event);
        if(event.preventDefault){
            event.preventDefault();
        }else{
            event.returnValue = false;
        }
    }
    Lily[‘preventDefault‘] = preventDefault;

3.在文档加载完时执行函数,不用等待图片都加载完。

function addLoadEvent(loadEvent, waitForImages){
        if(!isCompatible()) return false;
        if(waitForImages){
            addEvent(window, ‘load‘, loadEvent);
        }

        var init = function (){
            if(arguments.callee.done) return;
            arguments.callee.done = true;

            loadEvent.apply(document, arguments);
        };

        if(document.addEventListener){
            document.addEventListener("DomContentLoaded", init, false);
        }

        if(/WebKit/i.test(navigator.userAgent)){
            var timer = setInterval(function (){
                if(/complete|loaded/.test(document.readyState)){
                    clearInteval(timer);
                    init();
                }
            }, 10);
        }

        /*@cc_on @*/
        /*@if (@_win32)
        document.write("<src id=__ie_loaded defer src=//:><\/script>");
        var script = document.getElementById("__ie_loaded");
        script.onreadystatechange = function (){
            if(this.readyState == "complete"){
                this.onreadystatechange = null;
                init();
            }
        };
        /*@end @*/

        return true;
    }
    Lily[‘addLoadEvent‘] = addLoadEvent;

4.取得target对象。

function getTarget(event){
        event = event || getEvent(event);
        var target = event.target || event.srcElement;

        if(target.nodeType == Lily.node.TEXT_NODE){
            target = target.parentNode;
        }

        return target;
    }
    Lily[‘getTarget‘] = getTarget;

5.判断鼠标哪个键被按下。

技术分享
function getMouseButton(event){
        event = event || getEvent(event);
        var buttons = {
            ‘left‘ : false,
            ‘middle‘ : false,
            ‘right‘ : false
        };

        if(event.toString && event.toString().indexOf(‘MouseEvent‘) != -1){
            switch(event.button){
                case 0:
                    buttons.left = true;
                    break;
                case 1:
                    buttons.middle = true;
                    break;
                case 2:
                    buttons.right = true;
                    break;
                default:
                    break;
            }
        }else if(event.button){
            switch(event.button){
                case 1:
                    buttons.left = true;
                    break;
                case 2:
                    buttons.right = true;
                    break;
                case 3:
                    buttons.left = true;
                    buttons.right = true;
                    break;
                case 4:
                    buttons.middle = true;
                    break;
                case 5:
                    buttons.left = true;
                    buttons.middle = true;
                    break;
                case 6:
                    buttons.middle = true;
                    buttons.right = true;
                    break;
                case 7:
                    buttons.left = true;
                    buttons.middle = true;
                    buttons.right = true;
                    break;
                default:
                    break;

            }
        }else{
            return false;
        }

        return buttons;
    }
    Lily[‘getMouseButton‘] = getMouseButton;
View Code

6.获取鼠标在文档中的位置。

function getPositionInDocument(event){
        event = event || getEvent(event);
        var x = event.pageX || 
                (event.clientX + document.documentElement.scrollLeft) || 
                (event.clientX + document.body.scrollLeft);
        var y = event.pageY || 
                (event.clientY + document.documentElement.scrollTop) ||
                (event.clientY + document.body.scrollTop);

        return {‘x‘ : x, ‘y‘ : y};
    }
    Lily[‘getPositionInDocument‘] = getPositionInDocument;

7.获取按键的值。

function getKeyPressed(event){
        event = event || getEvent(event);
        var code = event.keyCode;
        var value = String.fromCharCode(code);

        return {‘code‘: code, ‘value‘: value};
    }
    Lily[‘getKeyPressed‘] = getKeyPressed;

 

【写一个自己的js库】 4.完善跨浏览器事件操作

标签:

原文地址:http://www.cnblogs.com/pandabunny/p/4771965.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!