您的位置：首页 > Web前端 > JavaScript

js跨浏览器事件处理程序

2014-08-10 16:39 706 查看

<!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事件处理程序跨浏览器兼容

相关文章推荐

新的分享

章节导航