如何检测类中的哪个元素是用Javascript单击的？

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

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

---

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

如果我理解正确，这一点如何：

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

---

将单击处理程序添加到

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

查看此

执行Jquery技巧如下

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

下面是编辑：

返回启动事件的DOM元素

---

在

中检查此项，您可以在POJS中这样做，它应该是跨浏览器兼容的，并且不使用任何第三方库。另一个优点是，命名类的每个元素只有一个事件侦听器，使用事件传播

JavaCScript

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

在

如果您使用了一些新的/自定义的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");
});

在

在jquery中，他们称之为。

您可以试试这个

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

$（“.list类li”）.find（'a'）.each（函数（）{
$（此）。单击（函数（）{
开关（$（this.attr（'id'））
{
“hrefID1”案；
//做什么
打破
“hrefID2”案；
//做什么
打破
“hrefID3”案；
//做什么
打破
}
});
});

不要随波逐流，因为这与其他类似（但不完全相同）

这只是提醒点击链接的文本，但同样在功能中，您可以在文本上切换

，例如

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

为什么不使用jquery呢最简单的方法是给出列表项或链接类。有什么特别的东西会让这成为一个坏主意吗？没有，一点也没有，但是有没有办法简单地确定这一点？可能使用“这个”？我只是第一次学习JS。@Arun你检查过我的答案了吗？有用吗？值得一提的是，其中一些方法需要现代浏览器，或者这些方法需要填充。i、 e.
queryselectoral
，
forEach
，
textContent
，
trim
和
addEventListener
，当前代码要求POJS解决方案的IE9+但+1.forEach.call

将在内存中创建一个空的

数组

，而

数组.prototype.forEach.call

不会。我不确定为什么跨浏览器POJS解决方案只做了一半？您创建了一个跨浏览器

addEvent

，但随后使用需要IE8+的“querySelector”。不过，对于POJS解决方案，+1。是的，我提到了IE8+是可以理解的，当然，如果您保留了自己的函数库，那么jquery将变得非常冗余，您可以揭开隐藏的神秘面纱。：）哦，是的，我不是那种不理解jQuery只是一个JS库的人。它只是让一些东西真的很容易写！好答案，尽管顺便说一句！很高兴看到一些poj，也许不是。我最讨厌的是（其中一个），我当然可以点击

li

元素，而不是点击包含的

a

元素，它会触发警报。使用jquery的事件委派而不是测试标记，为什么不使用简单的

from.tagName==“a”会更好

而不是regex

test

？也许吧，但你知道什么-这是事件委派。JQuery将在内部使用相同的机制<代码>测试：一些浏览器报告标记名为“A”，其他浏览器报告标记名为“A”，因此与

from.tagname==“A”| from.tagname==“A”

相比，测试要短一些。也许我没有解释清楚，是的，您有一种“直接委托”的形式，请参阅。jquery还应该为您处理

e | |事件

和

target | | src元素

，因此没有必要。然后是约翰·雷斯格本人。在jquery中根据以下内容提供最终代码。这就是我想要表达的。

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

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

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

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