如何检测某个类中的哪个元素是用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

添加一个单击处理程序到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 3

做一个jQuery的伎俩

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

这里是FIDDLE

Answer 4

编辑：引发事件event.target回报DOM元素。

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

入住这JSFiddle

Answer 5

你可以做到这一点在像这样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); 
}()); 

在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中，他们称这种。

Answer 6

你可以试试这个

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 7

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

Answer 8

不要在赶时髦，因为这是类似于其他人（但不是完全）......

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