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

js跨浏览器事件处理程序

时间:2014-08-10 18:43:30      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:js事件处理程序   跨浏览器兼容   

<!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样式和弄个定时器,可以做出非常绚丽的效果

js跨浏览器事件处理程序,布布扣,bubuko.com

js跨浏览器事件处理程序

标签:js事件处理程序   跨浏览器兼容   

原文地址:http://blog.csdn.net/xpf_show/article/details/38471105

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