js获取触发事件元素的坐标

简介: function Point(iX, iY){     this.x = iX;     this.y = iY; }   function fGetXY(aTag){         var oTmp=aTag;     var pt = new Point(0,0);     do {                 pt.

 

function Point(iX, iY){
    this.x = iX;
    this.y = iY;
}

 

function fGetXY(aTag){    
    var oTmp=aTag;
    var pt = new Point(0,0);
    do {        
        pt.x += oTmp.offsetLeft;
        pt.y += oTmp.offsetTop;
        oTmp = oTmp.offsetParent;
    } while(oTmp.tagName!="BODY");
    
    return pt;
}

 

如果想在触发事件的元素(例如文本框假如是myinput)下面弹出一个div

        获取触发事件的元素

       var myinput = window.event.srcElement;

        设置弹出元素的位置

        div.left = point.x; 
        div.top = point.y+myinput.offsetHeight+1; 
        div.style.visibility = 'visible';

目录
相关文章
|
2月前
|
Web App开发 JavaScript 前端开发
javascript onkeydown事件
javascript onkeydown事件
|
25天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
2月前
|
JavaScript
js两种移除事件的方法
js两种移除事件的方法
41 3
|
1天前
|
JavaScript 前端开发
页面滚动触发css3动画js插件
delighters.js是一款页面滚动触发css3动画js插件。该js插件可以在页面向下滚动时,为进入浏览器视口的元素制作各种炫酷的CSS3动画效果。
24 13
|
25天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
38 5
|
1月前
|
数据采集 存储 监控
实现自动化数据抓取:使用Node.js操控鼠标点击与位置坐标
本文介绍了如何使用Node.js和Puppeteer实现自动化数据抓取,特别是针对新闻网站“澎湃新闻”。通过设置代理IP、User-Agent和Cookie,提高爬虫的效率和隐蔽性,避免被网站封锁。代码示例展示了如何模拟鼠标点击、键盘输入等操作,抓取并整理新闻数据,适用于需要规避IP限制和突破频率限制的场景。
83 10
|
1月前
|
JavaScript 前端开发 开发者
.js的dom元素操作
【10月更文挑战第29天】通过灵活运用这些 DOM 元素操作方法,JavaScript 可以实现丰富的网页交互效果,如动态更新页面内容、响应用户操作、创建和删除页面元素等。在实际开发中,开发者可以根据具体的需求和场景,选择合适的 DOM 元素操作方法来实现所需的功能,为用户提供更加流畅和动态的网页体验。
|
2月前
|
存储 JavaScript 前端开发
js事件队列
【10月更文挑战第15天】
50 6
|
2月前
|
移动开发 JavaScript 前端开发
原生js如何获取dom元素的自定义属性
原生js如何获取dom元素的自定义属性
76 4
|
2月前
|
JavaScript
js删除数组中已知下标的元素
js删除数组中已知下标的元素
43 4