Question

-3

Get Clicked < li> from < ul onclick>

rated 0 times [ 2] [ 5] / answers: 1 / hits: 104066 / 14 Years ago, fri, february 25, 2011, 12:00:00

As a relative beginner with JS, I am struggling to try and find a solution to this.

I need to find out which line of an unordered list was clicked

<ul onclick=alert(this.clicked.line.id);>

  <li id=l1>Line 1</li>

  <li id=l2>Line 2</li>

  <li id=l3>Line 3</li>

</ul>

I don't really want to add a onclick event to each individual line, I'm sure there must be a way ??

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

tayaw

Add To Favorites

Follow

Total Points: 749

Total Questions: 88

Total Answers: 86

Location: Djibouti

Member since Sun, Feb 27, 2022

2 Years ago

tayaw questions

1 How to enable cache for getServerSideProps?

Thu, Mar 3, 22, 00:00, 2 Years ago

1 navigator.clipboard.readText() is not working in Firefox

Fri, May 7, 21, 00:00, 3 Years ago

1 Vuetify form .$refs validate is not a function

Wed, Oct 7, 20, 00:00, 4 Years ago

1 Using absolute position to place image above another image using Tailwind CSS

Sun, Sep 6, 20, 00:00, 4 Years ago

1 How to make div tag clickable with Link from react-router-dom?

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 14 Years ago kristinsonjab · Accepted Answer

You can use event.target for this:

JS:

// IE does not know about the target attribute. It looks for srcElement

// This function will get the event target in a browser-compatible way

function getEventTarget(e) {

    e = e || window.event;

    return e.target || e.srcElement; 

}



var ul = document.getElementById('test');

ul.onclick = function(event) {

    var target = getEventTarget(event);

    alert(target.innerHTML);

};

HTML:

<ul id=test>

    <li>Item 1</li>

    <li>Item 2</li>

    <li>Item 3</li>

</ul>

Example: http://jsfiddle.net/ArondeParon/2dEFg/5/

Please note that this is a very basic example and you will likely encounter some problems when you delegate events to elements containing more than one level. When this happens, you will have to traverse the DOM tree upwards to find the containing element.