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

最新推荐文章于 2024-09-30 14:28:41 发布

寒池鹤影

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量6.8k

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/linger_1314/article/details/123649626

版权

HTML JavaScript 事件处理元素选择鼠标交互

关键词由CSDN通过智能技术生成

第一种方法：使用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>

打印结果：