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