一、HTML文件：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取点击元素Selector路径</title>
<script src="tz.js"></script>
<style>
span {
display: inline-block;
height: 20px;
background-color: blanchedalmond;
margin: 2px;
padding: 6px;
}
table {
margin: 20px 0;
background-color: aliceblue;
}
thead {
font-weight: bold;
}
td {
border-bottom: 1px solid #a7a7a7;
padding: 4px 10px;
text-align: left;
}
.main{
padding: 20px 10px;
}
</style>
</head>
<body>
<div class="container"><button onclick="getPath(this);showDoms()">显示全部点击记录</button></div>
<div class="main">
<div id="test">
<button onclick="getPath(this)">输出错误</button>
<button onclick="getPath(this)">获取路径</button>
<button onclick="getPath(this);alert('hello')">弹窗</button>
</div>
</div>
<div class="main">
<div id="test2">
<button onclick="getPath(this)">输出错误</button>
<button id="btn" onclick="getPath(this)">获取路径</button>
<button onclick="getPath(this);alert('hello')">弹窗</button>
</div>
</div>
<div class="main">
<div class="container">
<span class="ss" onclick="getPath(this)">测试</span>
<span class="ss" onclick="getPath(this)">测试2</span>
<span class="ss" onclick="getPath(this)">测试3</span>
</div>
<div id="container" class="container">
<span onclick="getPath(this)">测试4</span>
<span onclick="getPath(this)">测试5</span>
<span onclick="getPath(this)">测试6</span>
</div>
<div id="table"></div>
</div>
<script>
function err(e) {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://xxx.com');
xhr.send();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.response);
// throw new Error(xhr.response);
}
}
}
function showDoms() {
let domhtml = '<table><thead><td>点击元素</td><td>元素路径</td><td>点击时间</td></thead><tbody>';
for (let i = 0; i < DomLists.length; i++) {
domhtml += '<tr><td>' + DomLists[i].text + '</td><td>' + DomLists[i].path + '</td><td>' + DomLists[i]
.time + '</td></tr>';
}
domhtml += '</tbody></table>';
document.querySelector('#table').innerHTML = domhtml;
}
</script>
</body>
</html>
二、JS文件：
//tz.js文件内容
//时间格式化
Date.prototype.format = function (fmt) {
var o = {
"M+": this.getMonth() + 1, //月份
"d+": this.getDate(), //日
"h+": this.getHours(), //小时
"m+": this.getMinutes(), //分
"s+": this.getSeconds(), //秒
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
"S": this.getMilliseconds() //毫秒
};
if (/(y+)/.test(fmt)) {
fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(fmt)) {
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
}
}
return fmt;
}
//获取节点selector路径
var DomLists = Array(); //存储被点击元素记录
//获取被点击元素方法
function getPath() {
e=arguments[0];
window.event? window.event.cancelBubble = true : e.stopPropagation(); // 阻止冒泡
let domPath = Array();
let domText = ""; //元素文本
if (e.innerText) {
domText = e.innerText;
} else {
domText = e.nodeName.toLocaleLowerCase();
}
let domTime = new Date().format("yyyy-MM-dd hh:mm:ss"); //点击时间
//判断是否存在ID
if (e.id) {
domPath.unshift('#'+e.id.toLocaleLowerCase());
} else {
//循环匹配元素
while (e.nodeName.toLowerCase() !== "html") {
if(e.id){
//判断是否存在ID
domPath.unshift('#'+e.id.toLocaleLowerCase());
break;
}else if(e.tagName.toLocaleLowerCase() == "body") {
//判断是否是BODY元素
domPath.unshift(e.tagName.toLocaleLowerCase());
}else{
//遍历获取元素顺序
for (i = 0; i < e.parentNode.childElementCount; i++) {
if (e.parentNode.children[i] == e) {
domPath.unshift(e.tagName.toLocaleLowerCase() + ':nth-child(' + (i + 1) + ')');
}
}
}
e = e.parentNode;
}
//domPath.unshift('html');
domPath = domPath.toString().replaceAll(',', '>');
}
//添加到点击记录
DomLists.push({
"text": domText,
"path": domPath,
"time": domTime
});
console.log('元素文本: ' + domText + ' 路径: ' + domPath + ' 时间: ' + domTime);
//返回结果
return {
"text": domText,
"path": domPath,
"time": domTime
};
}
三、效果图
被点击元素Selector
