扩展jQuery右键默认事件

来源：互联网发布：himall2.6 源码编辑：程序博客网时间：2024/06/04 07:07

(function($){  //隐藏作用域  避免和$冲突$.event.rightclickDisabled = $([]);  //禁用列表//定义特殊事件对象$.event.special.rightclick = {   eventType : 'rightclick', //定义事件类型      /*      data        namespaces   */   setup:function(data,namespaces){  //当在一个元素上添加某种事件类型的第一个事件时，setup会被调用一次      $(this).addClass('right-clickable').   //this 指向目标元素         bind('contextmenu',$.event.special.rightclick.handler);   },      //销毁 right click event   teardown:function(namespaces){      $(this).removeClass('right-clickable').         unbind('contextmenu',$.event.special.rightclick.handler);   },      //内部事件处理器   /*      return  false  继续默认行为   */   handler:function(event){      if($.event.rightclickDisabled.length && $(this).is($.event.rightclickDisabled)){  //如果元素被禁用该事件         event.stopPropagation();         event.preventDefault();      }      event.type = $.event.special.rightclick.eventType;      return $.event.dispatch.apply(this,arguments); //调用用户处理器   }   };$.event.special.rightmulticlick = {   eventType : 'rightmulticlick',   setup : function(data,namespaces){      $(this).addClass('right-clickable');   },      add: function(handleObj){      var data = $.extend({clickCount: 2, clickNumber: 0,lastClick:0,clickSpeed: 500,               handler:handleObj.handler},handleobj.data || {});      var id = $.event.special.rightmulticlick.eventType + handleObj.guid;      $(this).data(id,data).bind('contextmenu.'+ id,{id:id},$.event.special.rightmulticlick.handler)   },   remove :function(handleObj){      var id= $.event.special.rightmulticlick.eventType + handleObj.guid;      $(this).removeData(id).unbind('contextmenu.'+id);   },   teardown : function(namespaces){      $(this).removeClass('right-clickable');   },      handler :function(event){      if($.event.rightclickDisabled.length && $(this).is($.event.rightclickDisabled)){         event.stopPropagation();         event.preventDefault();         return;      }      var data = $(this).data(event.data.id);      event.timeStamp = event.timeStamp || new Date().getTime();      if(event.timeStamp - data.lastClick <= data.clickSpeed){         data.clickNumber++;      }else{         data.clickNumber = 1;         data.lastClick = event.timeStamp;      }            var result = false;      if(data.clickNumber == data.clickCount){         event.type = $.event.special.rightmulticlick.eventType;         result = data.handler.apply(this,arguments);      }      return result;         }   };$.each([$.event.special.rightclick.eventType,$.event.special.rightmulticlick.eventType],function(i,eventType){   $.fn[eventType] = function(data,fn){      if(fn == null){         fn = data;         data = null;      }        return arguments.length > 0 ? this.on(eventType,null,data,fn) : this.trigger(eventType);   };});   })(jQuery)

调用示例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html><head><meta http-equiv="charset" content="utf-8"><title>jQuery 右键 Right-click Event</title><link type="text/css" href="../common/demo.css" rel="stylesheet"><style type="text/css">.rightClickTarget { width: 12em; margin-left: 15em; padding: 1em 3em; border: 1px solid #3c8243; text-align: center; }.right-clickable { background-color: #ddffe8; cursor: url(rightclick.png), pointer; }</style><link type="text/css" href="http://code.jquery.com/ui/1.8.13/themes/smoothness/jquery-ui.css" ><script  src="http://code.jquery.com/jquery-1.8.3.js"  integrity="sha256-dW19+sSjW7V1Q/Z3KD1saC6NcE5TUIhLJzJbrdKzxKc="  crossorigin="anonymous"></script>  <script  src="http://code.jquery.com/ui/1.8.23/jquery-ui.js"  integrity="sha256-lFA8dPmfmR4AQorTbla7C2W0aborhztLt0IQFLAVBTQ="  crossorigin="anonymous"></script>  <script type="text/javascript" src="jquery.rightclick.js"></script>  </head><body>   <h1>jQuery 右键事件event</h1>      <div id="tabs">      <ul>         <li><a href="#basics">右键 right-click</a></li>      </ul>      <div id="basics" class="feature">         <h2>right click</h2>         <p></p>         <p>            <span class="demoLabel">Right-click:</span>            <label><input type="checkbox" id="defaultAction" />允许右键默认的动作</label>         </p>         <p>            <span class="demoLabel">&nbsp;</span>            <button type="button" id="triggerRightClick">触发事件（Trigger）</button>            <button type="button" id="unbindRightClick">Unbind</button>         </p>         <div id="defaultRightClick" class="rightClickTarget">            这里右键         </div>                  <script>            $(function(){            onRightClick();            });                        $('#triggerRightClick').click(function(){               $('#defaultRightClick').trigger('rightclick');            });                        $('#unbindRightClick').click(function(){               var bind = $(this).text() == 'Bind';               $(this).text(bind ? 'Unbind' : 'Bind');               if(bind){                  onRightClick();               }else{                  $('#defaultRightClick').off('rightclick');               }                           });                        function onRightClick(){               $('#defaultRightClick').on('rightclick',function(event){                  alert('事件类型：'+ event.type);                  return $('#defaultAction').is(':checked');               })            }                  </script>      </div>            <div id="multi" class="feature"></div>      </div>   </body>

阅读全文

0 0