在使用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. 前端 JS,localStorage/sessionStorage、cookie 及 url 等实现前台数据共享、传输

    需求是这样的:需要统计用户公司某款产品用户的回馈情况,美工给的设计多个psd,每个页面里面都有一个选择题,让用户选择自己的答案,最后经过几次选择之后在最后一个页面统一提交到后台!所以这里引出的技术需求 ...

  2. mysqldump 报导常

    Warning: A partial dump from a server that has GTIDs will by default include the GTIDs of all transa ...

  3. Java NIO- Selector 使用示例

    Selector selector = Selector.open(); channel.configureBlocking(false); SelectionKey key = channel.re ...

  4. python(31) enumerate 的用法

    例子一: b = "abcd" kv_dict = {} pre = 1234 for i, v in enumerate(b): kv_dict['%s-%d.jpg' %(pr ...

  5. ORACLE 仿照原表建表语法

    用于: 1.修改表前,可用于对原表表结构或表数据的备份 2.仿照原表的表结构建立一张新表 CREATE TABLE T_XXXX_BAK_130810 AS SELECT * FROM T_XXXX ...

  6. 如何让 Qt 的程序使用 Sleep

    Qt 为何没有提供 Sleep 论坛上不时见到有人问: Qt 为什么没有提供跨平台的 sleep 函数? 使用平台相关的 Sleep 或 nanosleep 以后,界面为什么没有反应? QThread ...

  7. .net core相关博客

    http://www.cnblogs.com/artech/蒋金楠,网名Artech,知名IT博主, 微软多领域MVP,畅销IT图书作者,著<WCF全面解析>.<ASP.NET MV ...

  8. tomcat8源码分析-Connector初始化

    谈起Tomcat的诞生,最早可以追溯到1995年.近20年来,Tomcat始终是使用最广泛的Web服务器,由于其使用Java语言开发,所以广为Java程序员所熟悉.很多人早期的J2EE项目,由程序员自 ...

  9. javascript-删除节点

    任务目的: 每点击一下按钮删除一个标签. 掌握到了: 这里是主要学习到了parentNote以及removeChild两个DOM属性. parentNote:parent英译为父亲,Note英译为节点 ...

  10. Head First 设计模式读书笔记(1)-策略模式

    一.策略模式的定义 策略模式定义了算法族,分别封装起来,让它们之间可以互换替换,此模式让算法的变化独立使用算法的客户. 二.使用策略模式的一个例子 2.1引出问题 某公司做了一套模拟鸭子的游戏:该游戏 ...