专栏首页刘晓杰js事件浏览器兼容案例

js事件浏览器兼容案例

var EventUtil = {
    //返回对event对象的引用
    getEvent: function (event) {
        return event ? event : window.event;
    },

    //返回事件的目标
    getTarget: function (event) {
        return event.target || event.srcElement;
    },

    getRelatedTarget: function (event) {
        if (event.relatedTarget) {
            return event.relatedTarget;
        } else if (event.toElement) {//IE的mouseout
            return event.toElement;
        } else if (event.fromElement) {//IE的mouseover
            return event.fromElement;
        } else {
            return null;
        }
    },

    //IE ---> DOM         case IE  return DOM
    getButton: function () {
        if (document.implementation.hasFeature("MouseEvents", "2.0")) {
            return event.button;
        } else {
            switch (event.button) {
                case 0://没有按键
                case 1://左键
                case 3://左键+右键
                case 5://左键+滚轮
                case 7://左键+滚轮+右键
                    return 0;//左键
                case 2://右键
                case 6://右键+滚轮
                    return 2;//右键
                case 4://滚轮
                    return 1;//滚轮
            }
        }
    },

    //取消默认行为
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault(event);
        } else {
            event.returnValue = false;
        }
    },

    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancenBubble = true;
        }
    },

    getWheelData: function (event) {
        if (event.wheelDelta) {
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },

    getCharCode: function (event) {
        if (typeof event.charCode == "number") {
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },

    getClipboardText: function (event) {
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData("text");
    },

    setClipboardText: function (event, value) {
        if (event.clipboardData) {
            return event.clipboardData.setData("text/plain", value);
        } else if (window.clipboardData) {
            return window.clipboardData.setData("text", value);
        }
    },

    addHandler: function (element, type, func) {
        if (element.addEventListener) {//DOM2
            element.addEventListener(type, func, false);
        } else if (element.attachEvent) {//IE
            element.attachEvent("on" + type, func);
        } else {//DOM0,js
            element["on" + type] = func;
        }
    },

    removeHandler: function (element, type, func) {
        if (element.removeEventListener) {//DOM2
            element.removeEventListener(type, func, false);
        } else if (element.detachEvent) {//IE
            element.detachEvent("on" + type, func);
        } else {//DOM0,js
            element["on" + type] = null;
        }
    }
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • getX和getRawX

    今天在做一个关于拖动button的小demo,看到里面有getX和getRawX。就写了个测试来看看两者有什么区别。 布局文件就一个button 代码如...

    提莫队长
  • Glide中request的调用和管理

    提莫队长
  • Android:FontMetrics详解

    Class that describes the various metrics for a font at a given text size. Rememb...

    提莫队长
  • Event(事件)的传播与冒泡

    特性说明和原理图: 标准浏览器和Ie9+浏览器都支持事件的冒泡和捕获,而IE8-浏览器只支持冒泡 标准和Ie9+浏览器用stopPropagation()或c...

    sam dragon
  • MySQL-event机制详解及官方bug剖析

    提示:公众号展示代码会自动折行,建议横屏阅读 ---- ---- 近期,有线上5.6版本event用户反映了两个问题: (1) 部分event莫名其妙的延迟...

    腾讯数据库技术
  • Cypress web自动化16-参数化,数据驱动测试案例

    自动化测试里面参数化思想是非常重要的,同一类型的测试,只需维护不同的数据就可以了。 对每组测试数据自动生成对应的测试用例,并且每个测试用例的结果互不影响,不能因...

    上海-悠悠
  • javascript当中冒泡(event bubble)用法

    9.冒泡(event bubble) 缺省情况下,当几个元素重合,事件从最上层元素开始往下层元素传播。 例 9.1(bubbleIEFF.html) <head...

    马克java社区
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 前端在最近几年实在火爆异常,vue、react、angular各路框...

    IMWeb前端团队
  • 向zepto.js学习如何手动(trigger)触发DOM事件

    最近一直在看zepto的源码,希望通过学习它掌握一些框架设计的技巧,也将很久不再拾起的js基础重新温习巩固一遍。如果你对这个系列感兴趣,欢迎点击下方地址watc...

    IMWeb前端团队
  • React基础语法06-事件对象的应用

    老规矩,先看完官方文档,记录学习笔记: 教程:https://www.runoob.com/react/react-tutorial.html 文档:htt...

    祈澈菇凉

扫码关注云+社区

领取腾讯云代金券