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

最新推荐文章于 2022-10-20 19:29:19 发布

赵圆圆

最新推荐文章于 2022-10-20 19:29:19 发布

阅读量3.6k

点赞数

分类专栏：前端常见试题 JS 文章标签：鼠标函数遍历标签 html

JS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端常见试题

4 篇文章 0 订阅

订阅专栏

鼠标点击页面中的任意标签，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);
        }
    }

赵圆圆

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
鼠标点击页面中的任意标签，alert该标签的名称和 js实现点击<li>标签弹出其索引值

方法一 : 在这里我们可以利用冒泡解决该问题 document.onclick = function(e){ var e=(e||event); var o=e["target"]||e["srcElement"]; alert(a.tagName.toLowerCase()); }方法二：进行遍历 <!doctype html><html l
复制链接

扫一扫