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中生成map对象的方法
Jan 09 Javascript
javascript + jquery实现定时修改文章标题
Mar 19 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
简单实现js页面切换功能
Jan 10 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
浅谈如何使用 webpack 优化资源
Oct 20 Javascript
vue+vuex+axios实现登录、注册页权限拦截
Mar 09 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
javascript条件式访问属性和箭头函数介绍
Nov 17 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正则修正符用法实例详解
2016/12/29 PHP
Yii2第三方类库插件Imagine的安装和使用
2017/07/06 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
gridpanel动态加载数据的实例代码
2013/07/18 Javascript
JS获得浏览器版本和操作系统版本的例子
2014/05/13 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
python爬取安居客二手房网站数据(实例讲解)
2017/10/19 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Javascript中parseInt的正确使用方式
2018/10/17 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python插入排序算法的实现代码
2013/11/21 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
Python实现简单HTML表格解析的方法
2015/06/15 Python
pycharm运行程序时在Python console窗口中运行的方法
2018/12/03 Python
浅谈python中str字符串和unicode对象字符串的拼接问题
2018/12/04 Python
使用python3调用wxpy模块监控linux日志并定时发送消息给群组或好友
2019/06/05 Python
python实现视频读取和转化图片
2019/12/10 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
简述 Python 的类和对象
2020/08/21 Python
eBay意大利购物网站:eBay.it
2019/09/04 全球购物
银行员工职业规划范文
2014/01/21 职场文书
迎八一活动主题
2014/01/31 职场文书
信息技术教学反思
2014/02/12 职场文书
学生会竞聘书范文
2014/03/31 职场文书
经典的毕业生自荐信范文
2014/04/14 职场文书
高中校园广播稿
2014/10/21 职场文书
护士工作心得体会
2016/01/25 职场文书
2019幼儿园感恩节活动策划书
2019/11/28 职场文书
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript
Python采集爬取京东商品信息和评论并存入MySQL
2022/04/12 Python