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

╰+攻爆jí腚メ 2021-12-05 05:13 110阅读 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.判断鼠标哪个键被按下。

![ContractedBlock.gif][] ![ExpandedBlockStart.gif][]

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;

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;

转载于:https://www.cnblogs.com/pandabunny/p/4771965.html

[ContractedBlock.gif]: https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif
[ExpandedBlockStart.gif]: /images/20211205/a731ca020d394a1cb3619d1010ca33b6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，110人围观）

还没有评论，来说两句吧...

相关阅读

相关解决跨浏览器DOM事件处理

<!DOCTYPE html> <html> <head> <title>事件流</title>

古城微笑少年丶/ 2024年02月17日 20:47/ 0 赞/ 96 阅读

相关 EventUtil 跨浏览器事件处理对象

/ Created by chen on 2015/10/28. / var EventUtil = { addHandler: functi

﹏ヽ暗。殇╰゛Y/ 2022年08月09日 14:55/ 0 赞/ 257 阅读

相关跨浏览器的事件处理程序感悟

代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>火狐</title> <sc

小鱼儿/ 2022年07月16日 09:18/ 0 赞/ 266 阅读

相关跨浏览器的iframe onload 事件监听

[http://hi.baidu.com/wyw5257/blog/item/fbe152cb8e7a8614be09e617.html][http_hi.baidu.com_

以你之姓@/ 2022年07月13日 16:23/ 0 赞/ 240 阅读

相关 JavaScript跨浏览器事件处理程序、事件对象

var EventUtil = { addHandler:function(element,type,handler){ if(

电玩女神/ 2022年05月29日 14:07/ 0 赞/ 285 阅读

相关跨浏览器访问事件的方法

一介绍 1、DOM事件模型和IE事件模型访问事件对象的方式完全不同，因此需要写一个跨浏览器的程序。 2、实现跨浏览器的通常做法是：将事件处理函数绑定到DOM对象的属性上。

绝地灬酷狼/ 2022年05月12日 00:44/ 0 赞/ 268 阅读

相关自己手动写一个js 的toast提示框

闲来无聊，就尝试着自己写一个toast,因为之前写网页是一直会用到的，所以就自己造了个轮子，也当作学习记录（有不好的地方请多多指教），下面贴代码 <!DOCTYPE

素颜马尾好姑娘i/ 2022年05月08日 08:56/ 0 赞/ 303 阅读

相关跨浏览器事件处理

事件处理程序事件就是用户或者浏览器要进行的某些动作，例如click、mouseover、load等。事件处理程序就是响应某个事件（动作）的函数。 click的事件

浅浅的花香味﹌/ 2022年01月29日 06:11/ 0 赞/ 309 阅读

相关跨浏览器的事件对象

var EventUtil = { target : function(e){ //目标事件 e = e

﹏ヽ暗。殇╰゛Y/ 2021年12月07日 11:07/ 0 赞/ 367 阅读

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

1.阻止冒泡。 function stopPropagation(event){ event = event || getEvent(even

╰+攻爆jí腚メ/ 2021年12月05日 05:13/ 0 赞/ 111 阅读