怎么实现js跨浏览器获取鼠标按键的值

发布网友发布时间：2022-05-16 07:20

共2个回答

懂视网时间：2022-05-16 11:41

js实现一些跨浏览器的事件方法

　　用JavaScript实现事件的绑定，移除，以及一些常用的事件属性的获取，时常要考虑到在不同浏览器下的兼容性，下面给出了一个跨浏览器的事件对象：

 var EventUtil = { 
 on: function(element, type, handler) {/* 添加事件 */
 if (element.addEventListener) {
 element.addEventListener(type, handler, false);
 } else if (element.attachEvent) {//IE 注意：此时事件处理程序会在全局作用域中运行，因此用attachEvent绑定的事件，此时在事件处理函数里的this 等于window，使用时要注意
 element.attachEvent("on" + type, handler);
 } else {
 element["on" + type] = handler;
 }
 },
 
 off: 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;
 }
 },
 
 getEvent: function(event) {/* 返回对event对象的引用 */
 return event ? event : window.event;
 },
 
 getTarget: function(event) {/* 返回事件的目标 */
 return event.target || event.srcElement;
 },
 
 preventDefault: function(event) { /* 取消事件的默认行为 */
 if (event.preventDefault) {
 event.preventDefault();
 } else {
 event.returnValue = false;
 }
 },
 
 stopPropagation: function(event) {/* 阻止事件冒泡 */
 if (event.stopPropagation) {
 event.stopPropagation();
 } else {
 event.cancelBubble = true;
 }
 },
 
 /* mouseover 和mouserout 这两个事件都会涉及把鼠标指针从一个元素的边界之内移动到另一个元素的边界之内。*/
 getRelatedTarget: function(event) {
 if (event.relatedTarget) {
 return event.relatedTarget;
 } else if (event.toElement) {//IE8 mouserout事件
 return event.toElement;
 } else if (event.fromElement) {//IE8 mouseover事件
 return event.fromElement;
 } else {
 return null;//其他事件
 }
 }
};

调用如下：

EventUtil.on(document, "click", function(event){//为document元素绑定click事件
 event = EventUtil.getEvent(event);//获取event事件对象
 alert("Screen coordinates: " + event.screenX + "," + event.screenY);
});

热心网友时间：2022-05-16 08:49

通过js 跨浏览器获取鼠标按键的值的方法
document.onmousedown = function( e ){
alert(getButton(e)) // e.button W3C是获取鼠标按键 0 表示左键 1表示中键 2表示右键
而IE浏览器则是 1表示左键 4表示中间 2表示右键这里的IE浏览器主要是IE8以下的浏览器
};
function getButton(e){
/*
1、window.event这个属性IE和Chrome都是支持的
2、但是Chrome也是支持W3C的
3、所以，如果说W3C和IE都支持的话，那么就已W3C做为标准化
*/
if( e ){ // 作为第一次判断Chrome 就以W3C为标准了，去年远标java就说到这个问题。
return e.button;
}else if( window.event ){
switch( window.event.button ){
case 1 : return 0; // 返回鼠标左键的值
case 4 : return 1; // 返回鼠标中键的值
case 2 : return 2; // 返回鼠标右键的值
case 0 : return 2; // 返回鼠标右键的值主要是360浏览器会返回了在IE浏览器中
返回的0是代表没有按下鼠标键的时候所返回来的值
};
};
};