Determining the clicked node in a JavaScript environment

Question

Determining the clicked node in a JavaScript environment

There are multiple spans with labels.

<span class="viewEdit">View and edit class one.</span>
<span class="viewEdit">View and edit class two.</span>
<span class="viewEdit">View and edit class three.</span>
<span class="viewEdit">View and edit class four.</span>
<span class="viewEdit">View and edit class five.</span>

I want to create a function that adds an 'on click' event to detect which span was clicked. For example, clicking the first span should return '0', the second '1'... and so on.

I am aware of using

document.getElementByClassName("viewEdit")

to create an array, but I'm unsure how to identify the clicked span.

I have attempted to find a solution for this question without success. If it has been answered elsewhere, I apologize for repeating it in a different way.

javascript

Answer 1

Answer №1

Your handler function will receive an event object.

function handleEvent(event) {
  var element = event.target;
  // Access the element here
}

event.target contains the node that was clicked on.

Answer 2

Your handler function will receive an event object.

function handleEvent(event) {
  var element = event.target;
  // Access the element here
}

event.target contains the node that was clicked on.

Answer 3

Answer №2

Check out the jsFiddle Demo here

Add a click handler to each element so that when clicked, it references the specific element triggering the event and makes an inference about its position relative to other elements.

Within the event handler, this will point to the element that triggered the event.

To achieve this, iterate through all elements with a specified class name:

var els = document.getElementsByClassName("viewEdit");
var elClicked = {};//Creating a public variable for potential use later
for( var i = 0; i < els.length; i++ ){

Then, within the loop, create an event handler and capture the index used to determine which number was clicked (this requires a closure).

for( var i = 0; i < els.length; i++ ){
 (function(local){
  els[i].onclick = function(){
   elClicked.element = this;
   elClicked.text = this.innerText;
   elClicked.index = local;
  };
 })(i)
}

Answer 4

Check out the jsFiddle Demo here

Add a click handler to each element so that when clicked, it references the specific element triggering the event and makes an inference about its position relative to other elements.

Within the event handler, this will point to the element that triggered the event.

To achieve this, iterate through all elements with a specified class name:

var els = document.getElementsByClassName("viewEdit");
var elClicked = {};//Creating a public variable for potential use later
for( var i = 0; i < els.length; i++ ){

Then, within the loop, create an event handler and capture the index used to determine which number was clicked (this requires a closure).

for( var i = 0; i < els.length; i++ ){
 (function(local){
  els[i].onclick = function(){
   elClicked.element = this;
   elClicked.text = this.innerText;
   elClicked.index = local;
  };
 })(i)
}

Answer 5

Answer №3

By using this code snippet, you can easily determine the index of the clicked item within a specific collection.

var items = document.getElementsByClassName("viewEdit");

for (var i = 0; i < items.length; i++) {
    (function (index) {
        items[index].addEventListener("click", function () {
            for (var x = 0; x < items.length; x++) {
                if (items[x] === this) alert(x);
            }

        }, false);
    })(i);
}

This solution is straightforward and should fulfill your current requirement... Check out this fiddle for demonstration.

Answer 6

By using this code snippet, you can easily determine the index of the clicked item within a specific collection.

var items = document.getElementsByClassName("viewEdit");

for (var i = 0; i < items.length; i++) {
    (function (index) {
        items[index].addEventListener("click", function () {
            for (var x = 0; x < items.length; x++) {
                if (items[x] === this) alert(x);
            }

        }, false);
    })(i);
}

This solution is straightforward and should fulfill your current requirement... Check out this fiddle for demonstration.

Answer 7

Answer №4

Simple method for accessing the parent node of span elements and adding an event handler...
See it in action!

const elements = document.querySelectorAll(".viewEdit");

elements[0].parentNode.addEventListener("click", function (event) {
    if (event.target.nodeName.toLowerCase() === "span") {
        alert([].indexOf.call(elements, event.target));
    }
}, false);

Answer 8

Simple method for accessing the parent node of span elements and adding an event handler...
See it in action!

const elements = document.querySelectorAll(".viewEdit");

elements[0].parentNode.addEventListener("click", function (event) {
    if (event.target.nodeName.toLowerCase() === "span") {
        alert([].indexOf.call(elements, event.target));
    }
}, false);

Answer 9

Answer №5

To capture all clicks, you can set up a click event listener on the document.body, then specify which elements to target based on their tag type and class name. Here's an example code snippet:

JavaScript

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

(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 whatClicked(e) {
        var target = e.target;

        if (target.tagName.toUpperCase() === "SPAN" && /(^| )viewEdit( |$)/.test(target.className)) {
            console.log(target);
        }
    }

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

Test this code on jsfiddle

Answer 10

To capture all clicks, you can set up a click event listener on the document.body, then specify which elements to target based on their tag type and class name. Here's an example code snippet:

JavaScript

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

(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 whatClicked(e) {
        var target = e.target;

        if (target.tagName.toUpperCase() === "SPAN" && /(^| )viewEdit( |$)/.test(target.className)) {
            console.log(target);
        }
    }

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

Test this code on jsfiddle

Answer 11

Answer №6

<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class One.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Two.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Three.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Four.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Five.</span>

<script type="text/javascript">
   function fn(sender){
  //add the sender object to your array
  //or maybe even just the sender's id
}
</script>

Answer 12

<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class One.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Two.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Three.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Four.</span>
<span class="viewEdit" onclick:"fn(this)">Click here to view and make changes to Class Five.</span>

<script type="text/javascript">
   function fn(sender){
  //add the sender object to your array
  //or maybe even just the sender's id
}
</script>

Determining the clicked node in a JavaScript environment

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What are some solutions for repairing unresponsive buttons on a webpage?

A guide on showing POST values from javascript XMLHttpRequest() in php

Accessing Facebook through Login with only a button visible

Add characters to div using JavaScript

What is the correct method for notifying the progress of time using jQuery?

Using jQuery to create a blinking effect on a specific letter in a string

What is the best way to assign a distinct index value to each object in an array

When working with GWT, you can easily attach an event listener to any element on the host page

How can you exhibit various images without relying on the <img> tag?

Having trouble with my bootstrap slider carousel - it's just not cooperating

Plot data points from geojson onto a leaflet map using markers

Converting function arguments into key/value pairs: A simple guide

Is there a more efficient method than creating a separate variable for the navbar on each individual page where it is being utilized?

Unable to trigger AJAX POST with jQuery click handler

Having trouble with a dropdown menu that allows for multi-select options?

The Camera component in React Native is not currently supporting foreground service

Unable to perform a fetch request in IE9 after the page has finished loading

After the form is successfully submitted, you can remove the required attribute

The process of saving report filters and making them accessible for both running and scheduling tasks

Show dynamic HTML Dropdowns with nested JSON data