jQuery如何实现点击页面获得当前点击元素的id或其他信息

如下代码可以实现点击页面获得被点击元素的id

1

2

3

$(document).click(function(e) { // 在页面任意位置点击而触发此事件

  $(e.target).attr("id");       // e.target表示被点击的目标

})

示例代码如下

1. 创建Html元素

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   <div class="box">

       <span>点击页面后，设置被点击元素背景色并获取其id：</span>

       <div class="content" id = "test">test

           <div id = "test1">test1

               <div id = "test2">test2

                   <div id = "test3">test3</div>

               </div>

           </div>

       </div>

   </div>

2. 设置css样式

   1
   2
   3
   4
   5
   div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

   div.box span{color:#999;font-style:italic;}

   div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

   div.content div{min-width:20px;min-height:20px;padding:30px;border:1px solid #446699;background:#ffffff;}

   .bg{background:#ff99cc !important;}

3. 编写jquery代码

   1
   2
   3
   4
   5
   6
   $(function(){

       $(document).click(function (e) {

           $(e.target).addClass('bg');     // 设置背景色

           alert($(e.target).attr('id'));  // 获取id

       })

   })

4. 观察效果

• 初始状态

  

• 点击id为test2的div