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工具 Event封装
Aug 21 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
jQuery 创建Dom元素
May 07 Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 Javascript
详解auto-vue-file:一个自动创建vue组件的包
Apr 26 Javascript
vue 搭建后台系统模块化开发详解
May 01 Javascript
详解微信小程序的不同函数调用的几种方法
May 08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 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
Windows2003 下 MySQL 数据库每天自动备份
2006/12/21 PHP
PHP合并数组+与array_merge的区别分析
2010/08/01 PHP
js中的escape及unescape函数的php实现代码
2007/09/04 Javascript
javascript 隔行换色函数代码
2010/10/24 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
2011/05/07 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
使用CSS和jQuery模拟select并附提交后取得数据的代码
2013/10/18 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery图片轮播(二)利用构造函数和原型创建对象以实现继承
2016/12/06 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)
2018/01/07 Javascript
使用JS模拟锚点跳转的实例
2018/02/01 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vue+vuex+json-seiver实现数据展示+分页功能
2019/04/11 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Vue父子组件传值的一些坑
2020/09/16 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
Python中的列表知识点汇总
2015/04/14 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
python实现爬虫统计学校BBS男女比例之数据处理(三)
2015/12/31 Python
详解Python进程间通信之命名管道
2017/08/28 Python
pandas object格式转float64格式的方法
2018/04/10 Python
python3.8下载及安装步骤详解
2020/01/15 Python
有趣的Python图片制作之如何用QQ好友头像拼接出里昂
2020/04/22 Python
Python用SSH连接到网络设备
2021/02/18 Python
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
现代生活方式的家具和装饰:Dot & Bo
2018/12/26 全球购物
水利公司纪检监察自我鉴定
2014/02/25 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
财务个人年度总结范文
2015/02/26 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL
业余无线电通联Q语
2022/02/18 无线电