获取被点击的元素
时间: 2023-08-23 17:04:51 浏览: 39
您可以使用 JavaScript 中的事件对象来获取被点击的元素。在处理 click 事件时,事件对象的 target 属性将包含被点击的元素。以下是一个示例:
```
document.addEventListener('click', function(event) {
console.log('Clicked element:', event.target);
});
```
在这个示例中,我们在整个文档上添加了一个 click 事件监听器。当用户单击任何元素时,事件处理程序将输出被点击的元素到控制台中。
相关问题
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` 属性,从而得到选择器。
js 获取被点击元素的名称
你可以使用JavaScript的event对象中的target属性来获取被点击的元素,然后通过该元素的name属性来获取该元素的名称。以下是示例代码:
```javascript
document.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log(event.target.name);
}
});
```
在这个示例中,我们添加了一个事件监听器来监听整个文档的点击事件。当用户点击一个按钮元素时,我们检查被点击的元素是否是一个button标签,如果是,则打印出该元素的名称。你可以将button替换为任何你想要监视被点击元素的标签名。