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 e = $.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();

});