注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

淡泊明智

 
 
 

日志

 
 

document.oncontextmenu页面右键菜单功能(2008-09-04 17:49:31| 分类: jsp+html+js+Ajax)  

2012-04-17 16:39:40|  分类: jsp+html+js+Ajax |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 

今天修改别人的页面右键菜单位置问题,虽然对页面的右键功能不是很熟悉,不过还好能上网.问题的现象是这样的当在没有滚动条的情况下右键菜单位置正 常,但出现滚动条下方的位置时,菜单位置不对,和鼠标位置相差很远。(很明显应该是滚动条出现引起的问题,不过苯啊,开始竟然没看出来)
  很老实的一步一步跟着原来程序员的代码走:java里面通过 
  StringBuilder sb = new StringBuilder("\n<li");
  sb.append(  " oncontextmenu=\"showonsub(this,'"+ addUrl
                 + "','" + modUrl + "','"  + delUrl + "');\"");
   return sb.toString();

  的方法把构件的jsp内容返回页面:
  <div id="isTree" class="leftmenu">
  <ul class="menuList">
    <%
 try {
  out.print(service.buildLeftMenu(person, moduleId));
 } catch (Exception ex) {
  ex.printStackTrace();
 }
 %>
  </ul>
  </div>
页面有div区块来装。通过out.print(String);方法把树型菜单和相对应的右键菜单画出来。
在页面的jscript中调用 oncontextmenu=showonsub(this,addurl,modurl,delurl) Fuction做出每个节点对应的右键菜单位置和内容。
  function showonsub(obj,addurl,modurl,delurl){
   nodeClick(obj);
  document.idfrom.id.value=obj.nodeid;
  document.idfrom.addurl.value=addurl;
  document.idfrom.modurl.value=modurl;
  document.idfrom.delurl.value=delurl;
  document.idfrom.issubmenu.value="true";
  document.oncontextmenu=showMenu;
}

   然后再调用 showMenu Fuction
 function showMenu(){
  var x, y, w, h, ox, oy;
  x = event.clientX;
  y = event.clientY;
  var obj = document.getElementById("rightmenu");
  if (obj == null)
   return true;
  ox = document.body.clientWidth;
  oy = document.body.clientHeight;
  if(x > ox || y > oy)
   return false;
  w = obj.offsetWidth;
  h = obj.offsetHeight;
  if((x + w) > ox)
    x = x - w;
  if((y + h) > oy)
    y = y - h;
  obj.style.posLeft = x + document.documentElement.scrollLeft;
  obj.style.posTop = y + document.documentElement.scrollTop;
  obj.style.visibility = "visible";
  return false;
 }
==
clientX
   检索与窗口客户区域有关的鼠标光标的X坐标,属性为只读,没有默认值。    
clientY
   检索与窗口客户区域有关的鼠标光标的Y坐标,属性为只读,没有默认值。
==
document.body.clientWidth
    网页可见区域宽;
document.body.clientHeight
    网页可见区域高;
==
假设 obj 为某个 HTML 控件。

obj.offsetTop 指 obj 距离上方或上层控件的位置,整型,单位像素。

obj.offsetLeft 指 obj 距离左方或上层控件的位置,整型,单位像素。

obj.offsetWidth 指 obj 控件自身的宽度,整型,单位像素。

obj.offsetHeight 指 obj 控件自身的高度,整型,单位像素。
==
a=document.body.scrollLeft+event.clientX
意思是判断浏览器是否支持滚动条滚位置的功能. 网页横向滚动条的左位置 加上 事件源的X坐标
==  

找到各个不懂的点以后,分析应该是最后的属性document.body.scrollTop和document.body.scrollLeft的问题,在网上一查,找到了对这原因的解释:是因为我的HTML文件头部加了文档类型。

<!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">


方法1.去掉头部文档类型。

方法2.把document.body.scrollTop和document.body.scrollLeft这两个家伙改个名字:

document.documentElement.scrollTop 和document.documentElement.scrollLeft。

当然document.body.clientWidth和document.body.clientHeight也要改名字了,改为:

document.documentElement.clientWidth和document.documentElement.clientHeight
一 般推荐 方法2 ,因为上面那串文档类型 体现了XHTML是用XML写成的,他描述的是该文档使用的DTD(文档类型定义)。其中PUBLIC代表公用DTD,还有一个SYSTEM代表系统 DTD,存储在本地磁盘中,调用结构良好的XML文件时会使用到。 所以最后不要动它
   通过今天下午的调试和修改,学到一点点页面方面的东西,也发现了还有好多东西都没接触到,HTML语言不是原来看的那么简单,真的是一门入门容易,精通难的东西。看来以后还的多学习啊!
  评论这张
 
阅读(1357)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018