如何检测类中的哪个元素被 Javascript 点击了？

Question

假设我们有一个带有类的无序列表：

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

假设现在我想创建一些函数，根据点击的项目执行不同的操作：

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

如果不为每个项目创建单独的函数并编写内联 onclick="" 事件，如何做到这一点？我也愿意使用 jQuery。

Answer 1

如果我理解正确的话会怎样：

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') {
      //...
    }
    //...
  });
});

Answer 2

你可以试试这个

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.

Answer 3

向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);
     }
   });

看到这个jsFiddle

Answer 4

做一个 Jquery Trick as

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

这里是FIDDLE

Answer 5

编辑： event.target 返回启动事件的 DOM 元素。

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

在JSFiddle查看这个

Answer 6

不要跟风，因为这与其他人相似（但不完全）......

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

http://jsfiddle.net/znySy/

这只是提醒点击链接的文本，但同样在函数内你可以在文本上switch，例如...

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

Answer 7

您可以像这样在 POJS 中执行此操作，这应该是跨浏览器兼容的，并且不使用任何 3rd 方库。另一个优点是命名类的每个元素只有一个事件侦听器，使用事件传播。

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);
}());

开启jsfiddle

如果您使用一些较新/自定义的 HTML 标记或 XML，那么您可能需要考虑 tagName case sensitivity，并写下以下内容以确定。

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");
});

开启jsfiddle

在 jquery 中，他们称之为event delegation。

Answer 8

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