js跨浏览器事件处理程序

最新推荐文章于 2019-07-23 04:36:02 发布

壹间show

最新推荐文章于 2019-07-23 04:36:02 发布

阅读量1k

点赞数

分类专栏：前端杂文浅谈javascript javascript实例 demo 文章标签： js事件处理程序跨浏览器兼容

本文链接：https://blog.csdn.net/xpf_show/article/details/38471105

版权

前端杂文同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

浅谈javascript

19 篇文章 0 订阅

订阅专栏

demo

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
</head>
<body>
  <div id="myDiv">
  	aaaaaaaaaaaaaaaaaaa
  </div>
  <ul id="myMenu" style="position:absolute;visibility:hidden;background-color:silver;">
  	<li>
  		<a href="">sasdsasdasdadasd</a>
  	</li>
  		<li>
  		<a href="">saswerwerwedgddadasd</a>
  	</li>
  		<li>
  		<a href="">sasdwewrwreadasd</a>
  	</li>
  </ul>
	<script type="text/javascript">
      var EventUtil = {
    addHandler: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    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) {
            return event.toElement;
        } else if (event.fromElement) {
            return event.fromElement;
        } else {
            return null;
        }
    },
    getButton: function(event) {
        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;
            }
        }
    },
    getCharCode: function(event) {
        if (typeof event.charCode == "number") {
            return event.charCode;
        } else {
            return event.keyCode;
        }
    },
    getWheelDelta: function(event) {
        if (event.wheelDelta) {
            return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
            return -event.detail * 40;
        }
    },
    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);
        }
    },
    preventDefault: function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    removeHandler: function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};
      EventUtil.addHandler(window,'load',function(event){
      	var div=document.getElementById('myDiv');
      	EventUtil.addHandler(div,'contextmenu',function(event){
      		event=EventUtil.getEvent(event);
      		EventUtil.preventDefault(event);

      		var menu=document.getElementById("myMenu");
      		menu.style.left=event.clientX+'px';
      		menu.style.top=event.clinetY+'px';
      		menu.style.visibility='visible';
      	});
      	EventUtil.addHandler(document,'click',function(event){
      		document.getElementById("myMenu").style.visibility="hidden";
      	});
      });
	</script>
</body>
</html>

当你点击aaa部分，ul显示的位置跟随你鼠标位置去显示，自己加下css样式和弄个定时器，可以做出非常绚丽的效果

壹间show

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js跨浏览器事件处理程序

aaaaaaaaaaaaaaaaaaa sasdsasdasdadasd saswerwerwedgddadasd sasdwewrwreadasd var EventUtil = { addHandler: function(element, type, handler) {
复制链接

扫一扫