您的位置：首页 > Web前端 > JavaScript

鼠标点击页面中的任意标签，alert该标签的名称和 js实现点击<li>标签弹出其索引值

2017-05-20 20:17 711 查看

鼠标点击页面中的任意标签，alert该标签的名称

方法一 :

在这里我们可以利用冒泡解决该问题

document.onclick = function(e){
var e=(e||event);
var o=e["target"]||e["srcElement"];
alert(o.tagName.toLowerCase());
}

方法二：

进行遍历

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遍历所有标签进行添加click事件</title>
</head>
<body>
<div class="alert">div</div>
<a href="javascript:;" class='alert'>a</a>
<b class="hel">b</b>
<script>
function getTagName(){
return document.getElementsByTagName("*");
}

function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
window.onload=function(){
var tagObj=getTagName();
console.log("nihaofdfdfdfdfdfdf");
for(var i=0,max=tagObj.length;i<max;i++){
tagObj[i].onclick=function(e){

stopPropagation(e);
alert(this.tagName);
}
}
}
</script>
</body>
</html>

js实现点击标签弹出其索引值

<html>
<head>
<style>
li{
width:50px;
height:30px;
margin:5px;
float:left;
text-align: center;
line-height: 30px;
border-radius:4px;
list-style-type: none;
background: red;
cursor:pointer;
}
</style>
<script>
window.onload=function(){
//此处有三种方法
};
</script>
<head>
<body>
<div>
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>
</div>

</body>
</html>

第一种：

var oli=document.getElementsByTagName('li');
for(var i=0; i<oli.length;i++)
{
oli[i].index=i;
oli[i].onclick=function(){
alert('你点击的列表的下标是：'+this.index);//列表下标从0开始
};
}

除此之外还有别的方法：

1）通过闭包的方法

var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
oli[i].onclick=(function(n){
return function(){
alert(n);
}
})(i)
}

或者：

2）

var oli=document.getElementsByTagName('li');
for(var i=0;i<oli.length;i++)
{
(function(n){
oli[i].onclick=function(){
alert(n);
}
})(i)
}

或者

3）

var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");

function foo() {
for (var i = 0; i < li.length; i++) {
li[i].onclick = (function (i) {
return function(){
alert(i);
}
})(i);
}
}
foo();

或者

4）使用ES6中的新特性let来声明变量

用let来声明的变量将具有块级作用域，很明显可以达到要求，不过需要注意的是得加个’use strict’（使用严格模式）才会生效

function foo() {'use strict'
for (let i = 0; i < li.length; i++) {
li[i].onclick = function(){
alert(i);
}
}
}
foo();

或者

5）事件委托

var ul = document.getElementsByTagName("ul")[0];
var li = ul.getElementsByTagName("li");
ul.addEventListener('click',function(ev){
var ev = ev||window.event;
var target = ev.target||ev.srcElement;
for( var i=0;i<li.length;i++){
if( li[i] == target){
alert(i);
}
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标函数遍历标签 html

相关文章推荐

新的分享

章节导航