如何檢測某個類中的哪個元素是用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 
    } 
}