在使用jquery的过程中,想取得当前点击input的绝对位置而去显示一个div,jquery本身提供offset和position这个两个方法,但position官方解释是relative to the offset parent,可以看到是针对父结点的,而offset官方解释relative to the document,貌似使用offset可以直接绝对定位。但是在网页中如果出现嵌套div的情况,top和left会叠加,因此这个时候如果要定位显示一个新的div就要把父亲结点的offset去掉,jquery提供了offsetParent这个方法。

因此,如下代码可以在点击一个控件后,在其下方显示一个绝对定位的div。

$('#id').click(function(event){
  var curleft = $(event.target).offset().left;
  var curtop = $(event.target).offset().top+$(event.target).outerHeight();
  var obj = $(event.target);
  obj = obj.offsetParent();
  //获取控件绝对位置
  while(obj.attr('tagName').toLowerCase() != 'body'){
  curleft =curleft- obj.offset().left;
    curtop =curtop- obj.offset().top;
    obj = obj.offsetParent();
  }
  $('#div').css('top',curtop+'px').css('left',curleft+'px');
});

jquery获取点击控件的绝对位置简单实例的更多相关文章

  1. getHitRect获取点击控件的位置

    public  void getHitRect(Rect outRect)                   Added in API level 1 Hit rectangle in parent ...

  2. Jquery获取EasyUI时间控件的值

    jquery easyui日期控件中,在页面里用JS拿到设置的日期值的方法 jquery easyui 日期框 有这样的一个日期文本框: <input type=" value=&qu ...

  3. (网页)jQuery的时间datetime控件在AngularJs中使用实例

    百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder= ...

  4. jquery的智能提示控件

    福利到~分享一个基于jquery的智能提示控件intellSeach.js   一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管 ...

  5. jquery的上传控件uploadly,每行都有一个这样的控件对id选择器的使用

    1.先看看预览图 这个是我的页面,其中如果我没点击添加一行的时候,会把本来有的数据进行循环出来,这个时候每个记录都必须有个上传图片的按钮,但是jquery的uploadly这个控件只是锁定id的,至少 ...

  6. Jquery和一些Html控件

    1.1 Jquery中如何获取各种Html控件的值    1.$("#ID").val();    2.Check获取选中的值:$("#ID").is(&quo ...

  7. Jquery获对HTML控件的控制

    Jquery获对HTML控件的控制 1.获取控件的值 1.1.radio 1.1.1 获取一组radio被选中项的值  var item = $('input[name=items][checked] ...

  8. jquery 操作服务端控件,select 控件

    <asp:DropDownList ID="ddl" runat="server"></asp:DropDownList> <se ...

  9. 获取屏幕上的某个控件相对位置,尤其是tableviewcell上的某一个控件的相对位置

    我的需求就是tableviewcell上的按钮,点击就会出现一个弹框: 主要就是获取,所点击的cell上控件的相对位置: CGPoint buttonCenter = CGPointMake(btn. ...

随机推荐

  1. MD5加密 时间差 流水号等方法

    /// <summary> /// 使用TimeSpan计算两个时间差 /// </summary> /// <param name="DateTime1&qu ...

  2. python(34):为什么在Python里推荐使用多进程而不是多线程?

    最近在看Python的多线程,经常我们会听到老手说:“Python下多线程是鸡肋,推荐使用多进程!”,但是为什么这么说呢?                  要知其然,更要知其所以然.所以有了下面的深 ...

  3. 【NOI】9272 偶数个三

    题目 链接:bajdcc/ACM 描述 在所有的N位数中,有多少个数中有偶数个数字3?结果模12345.(1<=N<=10000) 样例输入 2 样例输出 73 方法一:穷举 评价:最简单 ...

  4. 说说http协议中的编码和解码

    http://www.csdn1 2 3.com/html/itweb/20130730/29422_29378_29408.htm ****************************** 一. ...

  5. Shell执行将脚本里的变量打印到指定日志文件

    首先需要定位获取任务的运行日志或者报错信息,才能定位问题. 通过shell调用有些脚本的话,日志信息会打印在shell里.不过也有用户在shell里调用正常,但是到crontab调用的时候就出错并且没 ...

  6. JS parseInt 中08.09 被按照0处理(转)

    <script type="text/javascript"> var aa=["01","02","03" ...

  7. jsonp爬取页面

    jsonp Connection conn = Jsoup.connect("http://ip.taobao.com/service/getIpInfo.php?ip=" + i ...

  8. html静态页面调用php文件

    如在页面a.html中用下面这句调用,可以将action=test的参数传递到b.php. Javascript代码 <script type="text/javascript&quo ...

  9. PixelMatorPro快捷键大全(osx)

    Keyboard Shortcuts Navigate an image   Zoom in Command-Plus (+) Zoom out Command-Minus (-) Zoom to f ...

  10. 写给测试人员:不是所有的bug都需要修复

    用户往往对产品中各种各样的bug抱怨不已,而测试人员往往认为自己的职责就是揪出这些所有的bug并把它们全都修复.然而,这是一个误区.微软卓越测试工程总监Alan Page近日撰文,再次解释了有哪些bu ...