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

Suppose I have

假设我有

<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>

So far the closet I could get was with JS,

到目前为止,我可以得到的壁橱是JS,

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

Which prints out the contents of the div when I want the literal div id like 'cat' or 'dog' not 'a' or 'b'. Also I am trying to accomplish this using jQuery, am I heading in the right direction?

当我想要像'cat'或'dog'而不是'a'或'b'的文字div id时,打印出div的内容。此外,我正在尝试使用jQuery实现这一点,我正朝着正确的方向前进吗?

4 个解决方案

#1

You need to include jQuery js file in order to use jQuery methods.

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

With jQuery

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

With Javascript

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

Sample html page using JQuery

使用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>

#2

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

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

jQ way:

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

If it has not an ID, but has a CLASS (and you want it!) you can do:

如果它没有ID,但有一个CLASS(你想要它!)你可以这样做:

http://jsbin.com/ohotuv/3/edit - (where "elephant" is a class)

http://jsbin.com/ohotuv/3/edit - (“大象”是一类)

$('#stuff').click(function( e ){
    var name = e.target.id || e.target.className;
    alert(name);
});

#3

If you are using pure javascript you may need to make it cross browser compatible.

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

#4

I'd recommend reading up on jQuery.on().

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

In your example I'd recommend:

在你的例子中,我建议:

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

Although it's highly recommended to reduce the scope what what elements you're looking for the click event. For example:

虽然强烈建议缩小范围,但是您要查找的是click事件的元素。例如:

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

Which would only handle ANY div element inside the html tag with the id of stuff. Reducing the context of handling events can help with encapsulation and debugging problems.

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

#1