如何检测使用Javascript单击了类中的哪个元素?

问题描述：

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

Let's say we have a unordered list with a class:

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

让我们现在说说我想创建一个函数，该函数根据所单击的项目执行不同的操作:

Let's say now I wanted to create some function that does different things based on which item has been clicked on:

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

如何在不为每个项目创建单独的功能并编写内联onclick ="事件的情况下完成此操作?我也愿意使用jQuery.

How can this be done without creating a separate function for each item and writing an inline onclick="" event? I'm open to using jQuery as well.

答

您可以尝试

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

演示.

如何检测使用Javascript单击了类中的哪个元素?

相关推荐