jquery禁用右键菜单及事件兼容处理函数说明

jquery禁用右键菜单及事件兼容处理函数说明

  (2016-07-18 15:53:09)
标签: 

it

分类: web开发
 
 
如果你之前使用过原生的javascript写前端时,你可能会发现,有些代码在这个浏览器上运行正常,结果换个浏览器,可能运行就不正常了。由于浏览器由不同的公司开发,并且有的地方,浏览器公司并没有完全按照w3c的约定,所以就造成了今天这样的问题。
我们唯一的解决办法,就是根据不同的浏览器再写一套代码,这样就可以搞定。
比如 不同浏览器有不同的事件处理方式,如果我们要使JavaScript在不同的浏览器下能正常处理事件代码,就要分别进行判断,但是这样太麻烦、烦锁。
这时jquery给我们提供了一个事件兼容处理函数$.event.fix()通过这个函数可以帮我们转成统一的对象。
比如 阻止事件冒泡取消浏览器默认行为,这个在不同浏览器中,会有不同的处理方法,如果我们使用了$.event.fix()这个方法,就不需要关心浏览器兼容问题,我们可以统一的调用对象。






1、案例1:

//取消id=box这个div元素的右键菜单
$(document).bind("contextmenu",function(e){

 //事件兼容处理函数 转成统一对象          var  e = $.event.fix(e);
 var target = e.target;
 var buf_id=target.id;

 if(buf_id && buf_id=="box"){

 //取消浏览器默认行为                         e.preventDefault();
 return false;
            }

 return true;

 });
 
 
 
 
 
 
2、案例2:
//禁用box的右键菜单
$("#box").bind("contextmenu",function(event){
     var e = $.event.fix(event);
      e.preventDefault();
     return false;
 
});
 
 
 
 
 
3、案例3:

$("#test").click(function(event){

var = $.event.fix(event);
var elem e.target;

console.log('当前点击对象的标签名是:' elem.tagName);
console.log('当前文本是:' elem.value);
console.log('pageX:'+event.pageX +'pageY:'+event.pageY);

//取消事件冒泡 e.stopPropagation();

});
相关文章
相关标签/搜索