jquery获取点击控件的绝对位置简单实例
2016-10-13 09:25
537 查看
在使用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获取点击控件的绝对位置简单实例全部内容了,希望大家多多支持脚本之家~
您可能感兴趣的文章:
相关文章推荐
- jquery获取点击控件的绝对位置简单实例
- jquery获取控件的绝对位置
- 超简单的java获取鼠标点击位置坐标的实例(鼠标在Jframe上的坐标)
- JQuery插件第二十五个:改编自网络获取html控件的绝对位置
- 获取页面控件的绝对位置
- jQuery获取当前鼠标相对位置坐标和点击图片跳转上一张或下一张功能
- Silverlight获取控件绝对位置
- MFC 获取picture控件的鼠标点击坐标位置的方法
- 获取控件元素的绝对位置|
- 简单Js脚本用于Html中绝对位置的控件定位
- javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)
- javascript与jQuery设置取得div绝对位置一个小应用(像日历控件一样,在编辑框下面显示一个层)
- Silverlight获取控件绝对位置
- 在WebBrowser控件中获取鼠标在网页上点击的位置
- JS 获取控件的绝对位置
- 获取某个控件在网页中的绝对位置
- javascript 获取控件的绝对位置
- 获取控件在网页中的绝对位置
- 获取控件的绝对位置 和 宽度和高度
- MFC 获取picture控件的鼠标点击坐标位置的方法