js获取点击＜li＞标签里的内容值的两种方法

第一种方法：使用elementFromPoint获取鼠标点击内容第二种方法：使用this例子如下：<!DOCTYPE html><html><head><meta charset="utf-8"><title>Demo</title></head><body><div class = "pic"&

寒池鹤影

6951人浏览 · 2022-03-21 23:54:28

寒池鹤影 · 2022-03-21 23:54:28 发布

第一种方法：使用elementFromPoint获取鼠标点击内容
第二种方法：使用this

例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div class = "pic">
	<div class="ul">
		<ul id= "ul1">
			<li>1</li>
			<li>2</li>
			<li>3</li>
		</ul>
	</div>
</div>
</body>

<script>
function showValue(li){
	console.log(li);
    //第一种方法：使用elementFromPoint获取鼠标点击内容
	var obj=document.elementFromPoint(event.clientX,event.clientY);
	console.log("n:"  + obj.innerText);
    //第二种方法：使用this
	var obj1 = this.innerHTML;
	console.log("n:"  +obj1);
}

var li = document.querySelectorAll(".ul li");

for(var i = 0; i < li.length; i++){
	li[i].onclick = showValue;
}
</script>
</html>

打印结果：