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

分手后的思念是犯贱 2022-07-15 21:15 92阅读 0赞

在某次web前端笔试题上看到了这个题目

请实现，鼠标点击页面中的任意标签，alert该标签的名称.(注意兼容性)

解决办法：

方法一

事件的有捕获类型和冒泡类型

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

var el = document.getElementsByTagName('body');

el[0].οnclick=function(event){

evt=event||window.event;

var selected=evt.target||evt.srcElement;

alert(selected.tagName);

}

方法二：进行遍历

<!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.οnlοad=function(){
                var tagObj=getTagName();
    			console.log("nihaofdfdfdfdfdfdf");
                for(var i=0,max=tagObj.length;i<max;i++){
                    tagObj[i].οnclick=function(e){
    	
    				    stopPropagation(e);
                        alert(this.tagName);
                    }
                }
            }
        </script>
    </body>
    </html>