收集到的Javascript右键菜单实例

最新推荐文章于 2024-08-19 21:21:31 发布

山竹风好大

最新推荐文章于 2024-08-19 21:21:31 发布

阅读量377

点赞数

分类专栏：参考学习文章标签： javascript function class events xhtml html

参考学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>右键菜单</title>
<style type="text/css">
html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;}
.contextMenu{position:absolute;}
ul,li{list-style:none;margin:0px;padding:0px;}
.item{list-style:none;margin:0px;padding:0px;height:25px;line-height:25px;display:block;padding:0px;padding-left:10px;}
.itemOver{background-color:#316AC5;color:#fff;cursor:default;}
.separator{height:1px;border-top:1px solid #cccccc;margin:0px;padding:0px;}
</style>

function contextMenu(props,events){
this.props = props;
this.events = events;
}

contextMenu.prototype.buildContextMenu = function(){
   var menuObj = document.getElementById(this.props.menuID);
   var targetEle = this.props.targetEle;
   var eventFunc = this.events;

}

/*==============================================================*/
  function getX(evt){
   evt = evt || window.event;
     /**
     CssRain---增加代码. 8月20日
     使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
     */
   var scrollPosX;
   if (typeof window.pageYOffset != 'undefined') {
      scrollPosX = window.pageXOffset;
   }
   else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
      scrollPosX = document.documentElement.scrollLeft;
   }
   else if (typeof document.body != 'undefined') {
      scrollPosX = document.body.scrollLeft;
   }

   return (evt.x || evt.clientX || evt.pageX)+scrollPosX;
}

   function getY(evt){
   evt = evt || window.event;
   /**
     CssRain---增加代码. 8月20日
     使右键菜单，在有滚动条的情况下，也能正常在点击出弹出。
     */
   var scrollPosY;
   if (typeof window.pageYOffset != 'undefined') {
      scrollPosY = window.pageYOffset;
   }
   else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
      scrollPosY = document.documentElement.scrollTop;
   }
   else if (typeof document.body != 'undefined') {
      scrollPosY = document.body.scrollTop;
   }

   return (evt.y || evt.clientY || evt.pageY)+scrollPosY;
}

function clearEventBubble(evt){
    evt = evt || window.event;

    if(evt.stopPropagation){
    evt.stopPropagation();
    }else{
      evt.cancelBubble = true;
    }

    if(evt.preventDefault){
    evt.preventDefault();
    }else{
       evt.returnValue = false;
    }

}

//-->
</script>

</head>
<body>
<br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/> <br/>

    <li id="del">删除</li>
    <li class="separator"></li>
    <li id="prop">属性</li>
   </ul>
</div>
<br/>
</body>
<script type="text/javascript">
var cmenu = new contextMenu(
    {
menuID : "bmenu",
targetEle : "contextMenu"
},
{
bindings:{
  'checkLink' : function(o){alert("检测连接 "+o.value);},
  'edit' : function(o){alert("编辑 "+o.id);},
  'del' : function(o){alert("删除 "+o.id);},
  'prop' : function(){alert("查看属性");}
}
}
  );

cmenu.buildContextMenu();
</script>

</html>

山竹风好大

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
收集到的Javascript右键菜单实例

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">右键菜单 html,body{margin:0px;padding:0px;width:100%;height:100%;font-size:12px;overflow:show;} .conte
复制链接

扫一扫