扩展jQuery右键默认事件

最新推荐文章于 2023-05-11 16:03:12 发布

学海无涯书山有路

最新推荐文章于 2023-05-11 16:03:12 发布

阅读量382

点赞数

分类专栏： javascript插件 javascript语言文章标签： jquery插件 jquery右键事件右键默认事件

本文链接：https://blog.csdn.net/u013862108/article/details/78822751

版权

javascript语言同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

javascript插件

7 篇文章 0 订阅

订阅专栏


(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

收藏

觉得还不错? 一键收藏
0
评论
扩展jQuery右键默认事件

(function($){ //隐藏作用域避免和$冲突$.event.rightclickDisabled = $([]); //禁用列表//定义特殊事件对象$.event.special.rightclick = { eventType : 'rightclick', //定义事件类型 /* data namespaces *
复制链接

扫一扫