Як ви можете виявити, який елемент в класі було натиснуто з Javascript?

Припустимо, у нас є невпорядкований список з класом:

    

Скажімо, зараз я хотів створити певну функцію, яка виконує різні речі, на основі яких було натиснуто певний елемент:

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

Як це може бути зроблено без створення окремої функції для кожного елемента і написання вбудованого onclick = "" події? Я також відкритий для використання jQuery.

1
Найпростіший спосіб полягає в тому, щоб дати елементи списку або посилання на свої класи. Щось зокрема, що зробить це поганою ідеєю?
додано Автор Platinum Azure, джерело
Чому б не використовувати jquery
додано Автор vivek salve, джерело
@Arun чи ви перевірити мою відповідь? Це корисно?
додано Автор Usman, джерело
додано Автор manas, джерело
Ні взагалі, але чи є спосіб просто визначити це? Потенційно використовується "це"? Я вчився JS вперше.
додано Автор Arun, джерело

8 Відповіді

Ви можете спробувати це

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.

1
додано
@ Xotic750, IE8 підтримує querySelector .
додано Автор The Alpha, джерело
Так, я згадав, що це IE8 +
додано Автор Xotic750, джерело
Я не впевнений, чому ви йшли лише на половину шляху з крос-браузерним рішенням POJS? Ви створили крос-браузер addEvent , але потім ви використовуєте "Selection", який вимагає IE8 +. Тим не менш, +1 для рішення POJS.
додано Автор Xotic750, джерело

Як щодо цього, якщо я розумію правильно:

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') {
      //...
    }
    //...
  });
});
1
додано
[] .forEach.call створить порожню папку Array у пам'яті.
додано Автор The Alpha, джерело
Варто згадати, що деякі з цих методів вимагають сучасного браузера, або методи вимагають шамування. тобто querySelectorAll , forEach , textContent , trim і addEventListener , поточні коди вимагають IE9 + але +1 для рішення POJS.
додано Автор Xotic750, джерело

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

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

Check this in JSFiddle

0
додано
З цим я, звичайно, міг би натиснути на елемент li , а не на елемент a , і він би спрацював.
додано Автор Xotic750, джерело

Додайте обробник кліків до ul , наприклад:

$('.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

0
додано
Можливо, але що ви знаєте - це є подія делегація. jQuery буде використовувати внутрішню механіку. test : деякі веб-переглядачі повідомляють "A", інші "a" для тегу, тому тест трохи коротший порівняно з from.tagName === "a" || from.tagName === "A" .
додано Автор KooiInc, джерело
Можливо, я так не пояснював себе, так, у вас є форма "прямого делегування", див. jQuery on event делегування . jQuery також має подбати про e || подія і ціль || виправити для вас, "нормалізацію" і, отже, не потрібні . Потім щодо tagName самого Джона Ресіга. Дає вам остаточний код у jQuery відповідно до цього jsfiddle . Це те, що я намагався передати.
додано Автор Xotic750, джерело
Чи не було б краще використовувати делегування подій jQuery замість тестування тегу і чому не просто from.tagName === "a" замість тесту тест ?
додано Автор Xotic750, джерело

Ви можете зробити це в POJS так, це має бути сумісним між браузерами і не використовує бібліотеки третьої сторони. Іншою перевагою є те, що є тільки один слухач подій на елемент імені класу, використовує розповсюдження подій.

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

Якщо ви використовували новіші/спеціальні теги HTML або XML, вам може знадобитися чутливість справи тега , і вкажіть наступне, щоб бути впевненим.

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

У jQuery терміни вище можна було б записати як

Javascript

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

On jsfiddle

У jQuery вони називають делегування подій .

0
додано
Чи зможуть виборці прокоментувати?
додано Автор Xotic750, джерело
Зрозуміло, звичайно, якщо ви збережете власну бібліотеку функцій, то jQuery стає досить зайвою, і ви демистифицируете приховану магію. :)
додано Автор Xotic750, джерело
+1 Для нагадування мені, чому мені подобається jQuery:)
додано Автор El Ronnoco, джерело
О, так, я не один з тих людей, які не розуміють, що jQuery - це лише бібліотека JS. Це просто робить деякі речі дуже легко написати! Хороша відповідь, хоча до речі! Приємно бачити деякі POJS
додано Автор El Ronnoco, джерело
Напевно, ні. Моя ненависть до домашніх тварин (одна з)
додано Автор El Ronnoco, джерело

Не стрибати на підніжку, як це схоже на інші (але не зовсім) ...

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

http://jsfiddle.net/znySy/

Це просто попереджає, що текст посилання натиснуто, але в межах функції ви можете перемкнути на текст, наприклад ...

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
    }
}
0
додано
 <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>
0
додано
це не працює 4 мене
додано Автор Nickool, джерело
Записати цей код у подію готовий до документа
додано Автор Manish, джерело

Зробіть трюк jQuery як

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

Here is the FIDDLE

0
додано
ІТ КПІ - JavaScript
ІТ КПІ - JavaScript
504 учасників

співтовариство javascript розробників в Telegram