jquery获取点击控件的绝对位置简单实例


Posted in Javascript onOctober 13, 2016

在使用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获取点击控件的绝对位置简单实例全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
动态加载js文件 document.createElement
Oct 14 Javascript
jQuery 中使用JSON的实现代码
Dec 01 Javascript
javascript (用setTimeout而非setInterval)
Dec 28 Javascript
jQuery根据纬度经度查看地图处理程序
May 08 Javascript
原生javascript兼容性测试实例
Jul 01 Javascript
JQuery操作单选按钮以及复选按钮示例
Sep 23 Javascript
JavaScript验证18位身份证号码最后一位正确性的实现代码
Aug 07 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
jQuery实现弹幕效果
Feb 17 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
javascript 代码是如何被压缩的示例代码
May 06 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 #Javascript
Node.js中常规的文件操作总结
Oct 13 #Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 #Javascript
js图片切换具体实现代码
Oct 13 #Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 #Javascript
jquery实现图片切换代码
Oct 13 #Javascript
JavaScript和jQuery获取input框的绝对位置实现方法
Oct 13 #Javascript
You might like
php日期转时间戳,指定日期转换成时间戳
2012/07/17 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
PDO防注入原理分析以及注意事项
2015/02/25 PHP
微信支付扫码支付php版
2016/07/22 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Javascript 跨域访问解决方案
2009/02/14 Javascript
jquery+json 通用三级联动下拉列表
2010/04/19 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jquery实现表格本地排序的方法
2015/03/11 Javascript
vuejs 切换导航条高亮(路由菜单高亮)的方法示例
2018/05/29 Javascript
Bootstrap4 gulp 配置详解
2019/01/06 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
在小程序中推送模板消息的实现方法
2019/07/22 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
python简单实现旋转图片的方法
2015/05/30 Python
详解Python编程中包的概念与管理
2015/10/16 Python
django之常用命令详解
2016/06/30 Python
基于Python的关键字监控及告警
2017/07/06 Python
python出现"IndentationError: unexpected indent"错误解决办法
2017/10/15 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python实现贪吃蛇小游戏
2020/03/21 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
python中return如何写
2020/06/18 Python
CSS3实现的闪烁跳跃进度条示例(附源码)
2013/08/19 HTML / CSS
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
爱尔兰电脑、家电和家具购物网站:Buy It Direct
2019/07/09 全球购物
薇姿法国官网:Vichy法国
2021/01/28 全球购物
培训楼经理岗位责任制
2014/02/10 职场文书
出生医学证明书
2014/09/15 职场文书
2014年仓管员工作总结
2014/11/18 职场文书
七年级英语教学反思
2016/02/15 职场文书
golang slice元素去重操作
2021/04/30 Golang