document.addEventListener click事件获取点击元素在dom中的定位值
时间: 2024-01-12 08:54:00 浏览: 36
可以使用事件对象(event)的target属性获取点击的元素,再通过元素的offsetTop和offsetLeft属性获取元素在DOM中的定位值。示例代码如下:
```
document.addEventListener('click', function(event) {
var target = event.target;
var top = target.offsetTop;
var left = target.offsetLeft;
console.log('点击元素的定位值:top=' + top + ', left=' + left);
});
```
这段代码会在文档中任何地方点击时输出点击元素的top和left值。如果需要获取相对于文档的位置,可以使用getBoundingClientRect()方法获取元素的位置信息。
相关问题
在uniapp onload生命周期函数中执行,document.addEventListener 不生效
在 `uniapp` 中,`onLoad` 生命周期函数是在页面加载时执行的,但是此时页面可能还没有完全渲染完成,因此部分 `DOM` 元素可能还没有被创建,所以在 `onLoad` 中使用 `document.addEventListener` 可能不会生效。
建议在 `onReady` 生命周期函数中使用 `document.addEventListener`,因为此时页面已经渲染完成,`DOM` 元素已经被创建,可以正常添加事件监听。
例如:
```
export default {
onReady() {
document.addEventListener('click', () => {
console.log('click event');
});
}
}
```
vue获取被点击元素dom定位路径
可以使用 `event.target` 获取被点击的元素,然后通过该元素的 `parentNode` 属性逐级向上查找父元素,直到找到根节点为止。可以使用 `nodeName` 属性来判断当前节点的类型,从而得到定位路径。
以下是示例代码:
```javascript
function getDomPath(el) {
const path = []
while (el && el.nodeName !== 'HTML') {
let selector = el.nodeName.toLowerCase()
if (el.id) {
selector += '#' + el.id
} else if (el.className && typeof el.className === 'string') {
selector += '.' + el.className.trim().replace(/\s+/g, '.')
}
path.unshift(selector)
el = el.parentNode
}
return path.join(' > ')
}
document.addEventListener('click', function(event) {
const path = getDomPath(event.target)
console.log(path)
})
```
在上述示例代码中,我们使用了 `document.addEventListener` 监听了点击事件,然后通过 `getDomPath` 函数获取被点击元素的定位路径,并输出到控制台中。在 `getDomPath` 函数中,我们通过 `while` 循环不断向上查找父元素,并将每一级父元素的选择器存储到 `path` 数组中,最后通过 `join` 方法将所有选择器连接起来。在查找父元素时,我们通过 `nodeName` 属性来判断当前节点的类型,如果是元素节点,我们就可以获取其标签名,并进一步判断其是否有 `id` 或 `className` 属性,从而得到选择器。