3

假设我有

<body>
 <div id="stuff">
  <div id="cat">a</div>
  <div id="dog">b</div>
  <div id="elephant">c</div>
  <div id="rabbit">d</div>
  <div id="frog">e</div>  
 </div>
</body>​

到目前为止，我能得到的壁橱是 JS，

document.getElement('body').onclick = function(e){
    alert(e.target.innerHTML);
}​

当我想要像'cat'或'dog'这样的文字div id而不是'a'或'b'时，它会打印出div的内容。我也正在尝试使用 jQuery 来实现这一点，我是否朝着正确的方向前进？

4

4 回答 4

5

您需要包含jQuery js 文件才能使用 jQuery 方法。

使用 jQuery

$('body').click(function(e){
    alert(e.target.innerHTML);
    alert(e.target.id)
    alert($(e.target).attr('id'));
}​);

使用 Javascript

document.getElement('body').onclick = function(e){
    alert(e.target.innerHTML);
    alert(e.target.id)
}​

使用 JQuery 的示例 html 页面

<!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="utf-8">
   <title>jQuery demo</title>
 </head>
 <body>
   <a href="http://jquery.com/">jQuery</a>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">
     document.getElement('body').onclick = function(e){
        alert(e.target.innerHTML);
        alert(e.target.id)
     }​
   </script>
 </body>
</html>
于 2013-01-05T01:49:03.577 回答
2

http://jsbin.com/ohotuv/1/edit

document.getElementById('stuff').onclick = function( e ){
    alert( e.target.id );
};

jQ方式：

$('#stuff').click(function( e ){
    alert( e.target.id );
});

如果它没有ID，但有CLASS（你想要它！）你可以这样做：

http://jsbin.com/ohotuv/3/edit - （其中“大象”是一个类）

$('#stuff').click(function( e ){
    var name = e.target.id || e.target.className;
    alert(name);
});
于 2013-01-05T02:59:38.300 回答
1

如果您使用的是纯的javascript，您可能需要使其跨浏览器兼容。

window.onload=function(){
    document.getElementsByTagName('body')[0].onclick = function(e){
        e = e ? e : window.event;
        var source = e.target || e.srcElement;
        alert(source.id);
    }
}
于 2013-01-05T02:57:44.953 回答
0

我建议阅读jQuery.on()。

在您的示例中，我建议：

$("body").on("click", function(event){
  alert($(this).id);
});

尽管强烈建议缩小范围，但您正在寻找点击事件的哪些元素。例如：

$("#stuff").on("click", "div", function(event){
  alert($(this).id);
});

它只会处理 html 标记内的任何 div 元素，其 id 为 stuff。减少处理事件的上下文有助于解决封装和调试问题。

于 2013-01-05T02:20:55.183 回答