How can you detect which element in a class was clicked on with Javascript?

Question

Let's say we have a unordered list with a class:

    <ul class="list-class">
        <li><a href="#">All</a></li>
        <li><a href="#">Breakfast</a></li>
        <li><a href="#">Lunch</a></li>
        <li><a href="#">Dinner</a></li>
        <li><a href="#">Snack</a></li>
   </ul>

Let's say now I wanted to create some function that does different things based on which item has been clicked on:

function whichElement() {
    alert("The -- Link has been clicked");
}

How can this be done without creating a separate function for each item and writing an inline onclick="" event? I'm open to using jQuery as well.

The easiest way is to give the list items or links classes of their own. Anything in particular that would make that a bad idea? — Platinum Azure
– Platinum Azure, Commented Jun 25, 2013 at 5:14
No not at all, but is there a way to simply determine this? Potentially using "this"? I'm just learning JS for the first time. — Arun
– Arun, Commented Jun 25, 2013 at 5:15

elclanrs · Accepted Answer · 2013-06-25 05:24:06Z

1

How about this if I understand correctly:

var items = document.querySelectorAll('.list-class li');

[].forEach.call(items, function(item){

  var text = item.textContent.trim().toLowerCase();

  item.addEventListener('click', function(){
    if (text == 'all') {
      //...
    }
    //...
  });
});

edited Jun 25, 2013 at 5:24

answered Jun 25, 2013 at 5:17

elclanrs

94.2k21 gold badges137 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Xotic750 Over a year ago

Would be worth mentioning that some of these methods require a modern browser, or the methods require shimming. i.e. querySelectorAll, forEach, textContent, trim and addEventListener, current codes requires IE9+ but +1 for POJS solution.

The Alpha Over a year ago

[].forEach.call will create an empty Array in the memory while Array.prototype.foreach.call doesn't.

The Alpha · Accepted Answer · 2013-06-25 05:34:13Z

1

You may try this

function addEvent(elem, event, fn)
{
    if (elem.addEventListener)
    {
        elem.addEventListener(event, fn, false);
    }
    else
    {
        elem.attachEvent("on" + event, function() {
            return(fn.call(elem, window.event));   
        });
    }
}

addEvent(window, 'load', function(e){
    var list = document.querySelector('.list-class');
    addEvent(list, 'click',  function(e){
         e = e || window.event;
         var el = e.target || e.srcElement;
         alert(el.innerHTML);
    });
});

DEMO.

answered Jun 25, 2013 at 5:34

The Alpha

147k30 gold badges294 silver badges313 bronze badges

2 Comments

Xotic750 Over a year ago

I'm not sure why you only went half way with your cross-browser POJS solution? You created a cross-browser addEvent but then you use ´querySelector´ which requires IE8+. Still, +1 for a POJS solution.

Xotic750 Over a year ago

Yes, I mentioned that it is IE8+

KooiInc · Accepted Answer · 2013-06-25 05:20:20Z

0

Add a click handler to the ul, something like:

$('.list-class').on(
  'click',
   function(e){
     e = e || event;
     var from = e.target || e.srcElement;
     if (/^a$/i.test(from.tagName)){
        alert('you clicked '+from.innerHTML);
     }
   });

See this jsFiddle

answered Jun 25, 2013 at 5:20

KooiInc

124k32 gold badges145 silver badges181 bronze badges

3 Comments

Xotic750 Over a year ago

Would it not have been better to use jquery's event delegation instead of testing for the tag and why not a simple from.tagName === "a" instead of regex test?

KooiInc Over a year ago

Maybe, but what do you know - this is event delegation. JQuery will use the same mechanics internally. test: some browsers report 'A', others 'a' for the tagname, so test is a bit shorter compared to from.tagName === "a" || from.tagName === "A".

Xotic750 Over a year ago

Perhaps I didn't explain myself so well, yes you have a form of "direct delegation", see jquery on event delegation. jquery should also take care of the e || event and target || srcElement for you by "normalisation" and hence are unnecessary. Then regarding tagName by John Resig himself. Gives you final code in jquery as per this jsfiddle. This is what I was trying to convey.

Usman · Accepted Answer · 2013-06-25 05:22:30Z

0

Do a Jquery Trick as

$("#list-class li").click(function() {
    alert($(this).prevAll().length+1);
});

Here is the FIDDLE

answered Jun 25, 2013 at 5:22

Usman

3,2883 gold badges31 silver badges50 bronze badges

Comments

Praveen · Accepted Answer · 2013-06-25 05:30:59Z

0

EDIT: event.target returns DOM element that initiated the event.

$('.list-class').click(function(e){  
   alert(e.target.nodeName);
});

Check this in JSFiddle

edited Jun 25, 2013 at 5:30

answered Jun 25, 2013 at 5:25

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

Xotic750 Over a year ago

With this, I could of course click on an li element and not specifically the contained a element and it would fire the alert.

El Ronnoco · Accepted Answer · 2013-06-25 10:23:04Z

0

Not to jump on the bandwagon as this is similar to others (but not quite)...

$('.list-class>li').on('click',
   function(){
      alert('clicked ' + $('a',this)[0].innerHTML); //eg "clicked Lunch" etc
   }
);

http://jsfiddle.net/znySy/

This simply alerts the text of the link clicked, but equally within the function you could switch on the text eg...

function(){
    switch ($('a',this)[0].innerHTML) {
        case 'Lunch'     : // do something for Lunch
        case 'Breakfast' : // do something for Breakfast
        default          : // do something for not Lunch or Breakfast
    }
}

edited Jun 25, 2013 at 10:23

answered Jun 25, 2013 at 9:19

El Ronnoco

11.9k5 gold badges41 silver badges67 bronze badges

Comments

Xotic750 · Accepted Answer · 2013-06-25 19:02:54Z

0

You can do it in POJS like so, this should be cross-browser compatible and doesn't use any 3rd party libraries. Other advantage is that there is only one event listener per element of the named class, uses event propagation.

Javacsript

/*jslint maxerr: 50, indent: 4, browser: true */
/*global alert */

(function () {
    "use strict";

    function addEvent(elem, event, fn) {
        if (typeof elem === "string") {
            elem = document.getElementById(elem);
        }

        function listenHandler(e) {
            var ret = fn.apply(null, arguments);

            if (ret === false) {
                e.stopPropagation();
                e.preventDefault();
            }

            return ret;
        }

        function attachHandler() {
            window.event.target = window.event.srcElement;

            var ret = fn.call(elem, window.event);

            if (ret === false) {
                window.event.returnValue = false;
                window.event.cancelBubble = true;
            }

            return ret;
        }

        if (elem.addEventListener) {
            elem.addEventListener(event, listenHandler, false);
        } else {
            elem.attachEvent("on" + event, attachHandler);
        }
    }

    function whichElement(e) {
        var target = e.target;

        if (target.tagName === "A" && target.parentElement.tagName === "LI" && target.parentElement.parentElement.className === "list-class") {
            alert("The " + target.firstChild.nodeValue + " Link has been clicked");
        }
    }

    addEvent(document.body, "click", whichElement);
}());

On jsfiddle

If you were using some newer/custom HTML tags or XML then you may need to consider tagName case sensitivity, and write the following to be certain.

if (target.tagName.toUpperCase() === "A" && target.parentElement.tagName.toUpperCase() === "LI" && target.parentElement.parentElement.className === "list-class") {

In jquery terms the above could be written as

Javascript

$(document).on('click', '.list-class>li>a', function (e) {
    alert("The " + e.target.firstChild.nodeValue + " Link has been clicked");
});

On jsfiddle

In jquery they call this event delegation.

edited Jun 25, 2013 at 19:02

answered Jun 25, 2013 at 5:30

Xotic750

23.6k8 gold badges59 silver badges81 bronze badges

3 Comments

Xotic750 Over a year ago

Understood, of course if you keep your own library of functions then jquery becomes pretty redundant, and you demystify the hidden magic. :)

El Ronnoco Over a year ago

Oh yeah I'm not one of those people that doesn't understand that jQuery is just a JS library. It just makes some stuff really easy to write! Good answer though btw! Nice to see some POJS

El Ronnoco Over a year ago

Probably not. My pet hate (one of)

Manish Parmar · Accepted Answer · 2014-03-27 09:44:04Z

0

<ul class="list-class">
        <li><a href="#" id="hrefID1">All</a></li>
        <li><a href="#" id="hrefID2">Breakfast</a></li>
        <li><a href="#" id="hrefID3">Lunch</a></li>        
   </ul>
 <script>
$(".list-class li").find('a').each(function(){
    $(this).click(function(){
        switch($(this).attr('id'))
        {
            case "hrefID1";
                    //do what ever 
                    break;
            case "hrefID2";
                    //do what ever 
                    break;
            case "hrefID3";
                    //do what ever 
                    break;
        }
    });
});
</script>

edited Mar 27, 2014 at 9:44

answered Jun 25, 2013 at 5:38

Manish Parmar

8591 gold badge11 silver badges19 bronze badges

Collectives™ on Stack Overflow

How can you detect which element in a class was clicked on with Javascript?

8 Answers 8

2 Comments

2 Comments

3 Comments

Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

3 Comments

Comments

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related