Question

假设我有

<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实现这一点，我是朝着正确的方向前进吗？

Answer 1

您需要包含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>

Answer 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);
});

Answer 3

如果您使用纯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);
    }
}

Answer 4

我建议您阅读jQuery.on()。

在你的例子中，我建议：

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

虽然强烈建议缩小范围，但是您要查找点击事件的元素。例如：

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

只能处理带有id的东西的html标签内的任何div元素。减少处理事件的上下文有助于解决封装和调试问题。

确定使用jQuery单击了哪个元素id或类？

4 个答案: