獲取點擊的元素ID

Question

我準備了一個演示HERE

我的問題：我想獲得點擊的元素的ID。 它總是返回包含其他元素的元素的ID：「外部」DIV父級ID。

有趣的是，添加alert(...)（在DEMO中取消註釋）它帶有兩個警報！怎麼樣？爲什麼？
第一個指示覆蓋DIV的ID和第二個警報：ID'容器'。 如何獲得確切點擊元素的ID？

$(document).ready(function(){ 

    $('div').each(function(){ 
     $(this).click(function(){ 
     $('#clicked_info').html($(this).attr('id')); 
     //alert($(this).attr('id')); // try THIS! wow! 
     }); 
    }); 

    }); 

是否也可以抓住所有的元素ID受鼠標（點擊），如alert做，但沒有alert？

Answer 1

當需要的點擊選擇器已被使用時，不需要.each()$('div')，參考DOM中的任何'div'元素。

---

click事件會默認傳播了DOM樹，
返回每事件泡泡當前元素ID。

警報暫停氣泡執行，提醒當前元素ID使得清晰可見時肯定結果this.id被滿足的冒泡階段。
如果沒有使用alert或console.log（在頁面上寫結果的示例中），所有先前檢測到的ID將被最新註冊覆蓋在航班上，導致只有最後註冊的ID。

比方說，我們有這個簡單的HTML結構的廣告，我們點擊款元素：

<div id="container"> 
    Container element 
    <div id="box"> 
     Box element 
     <p>Paragraph</p> 
    </div> 
</div> 

現在讓我們防止萬一使用event.stopPropagation()

$(function() { 

    $('div').click(function(ev) { 
    ev.stopPropagation(); 
    console.log( this.id ); // "box" 
    }); 

}); 

傳播在上面的例子中， （即使我們點擊了p元素）綁定到click事件的元素選擇器是$('div');進一步傳播被阻止 - 返回期望的結果："box"。

使用類似的方式上面的代碼，但聽而不是爲event.target我們可能最終有錯誤的結果：

$(function(){ 

    $('div').click(function(ev){ 
    console.log( ev.target.id ); // "" 
            // "" 
    }); 

}); 

導致實際註冊event.target元素是HTML 段落元素。 具有兩個嵌套div元件（#box和#container）的console.log結果結束具有冒泡事件槽我們兩個div選擇器記錄所述相同（空）值event.target兩次（// "" // ""）。

要清楚地看到當前event.currentTarget元素冒泡是目前 - 我們可以這樣做：

console.log(ev.currentTarget.id+' '+ev.currentTarget.tagName); // "box DIV" 
                   // "container DIV" 

仍然導致最後 DIV元素。

探索所有上述結果後，得到的答覆是停止/取消事件冒泡使用event.stopPropagation()和獲取event.currentTarget.id DOM樹或者乾脆this.id引起我們的jQuery選擇已經具有所需的$('div')元素。

---

現在知道事件冒泡DOM和
獲得的列表中的所有元素ID
我們只允許事件傳播，並收集ID爲Array就像這個例子：

$(function(){ 

    var allIDs = []; // Empty Array 

    $('div').on('mousedown', function(ev){ // 
    allIDs.push(this.id); // Push all bubbling DIVs ID into array!! 
    console.log("All IDs: " + allIDs); 
    console.log("Ev. bubbled Selector ID: " + this.id); // First Parent 
    console.log("Target ID: " + ev.target.id); // The targeted one 
    }).on('mouseup', function(){ 
    allIDs = []; // Reset array for further clicks inspections 
    }); 

}); 

jsBin demo

Answer 2

您正在爲所有div元素分配click處理程序，並且由於div＃容器是返回元素ID的所有div的父級。

更改您準備事件的代碼如下：

$(document).ready(function(){ 

     $(".cssInner").click(function(){ 
     $('#clicked_info').html($(this).attr('id')); 
     //alert($(this).attr('id')); // try THIS! wow! 
     }); 

    }); 

工作例如：http://jsbin.com/udeha4/15/edit

Answer 3

我的猜測是，它是因爲點擊事件從內到的div內含div冒泡。該div的click處理函數將被最後調用，並將覆蓋您的#clicked_info元素中的任何值。

如果你想只爲被稱爲內div的處理程序，那麼你必須選擇他們專門安裝單擊處理時：

$(document).ready(function(){ 
    $('div#container > div').each(function(){ 
     $(this).click(function(){ 
     $('#clicked_info').html($(this).attr('id')); 
     }); 
    }); 
    }); 

編輯：或者，更容易操作，只需返回false從你的處理函數。這將停止事件傳播到包含元素。

Answer 4

由於您的點擊處理程序應用於所有div，因此內部div和容器上都有一個點擊處理程序。當您單擊一次時，兩者的處理程序都會執行。如果你想只顯示內部的div你可以阻止事件做這個「冒泡」：

$('div').each(function(){ 
    $(this).click(function(e){ 
    e.stopPropagation(); 
    $('#clicked_info').html($(this).attr('id')); 
    }); 
}); 

Answer 5

我覺得這是你的意思：

$(document).ready(function(){ 
    $('div .cssInner').click(function(){ 
    $('#clicked_info').html($(this).attr('id')); 
    //alert($(this).attr('id')); // try THIS! wow! 
    }); 
}); 

在這種情況下，您設定的點擊事件只發生在內部元素上！

Answer 6

原因是所謂的事件冒泡。當元素觸發事件時，其祖先元素將被通知事件。如果他們有任何事件處理程序綁定到該事件，它們也會被觸發。

在這種情況下，#div3點擊觸發的處理程序元素（因此警報div3），然後事件冒泡到container元素，觸發元素上的處理程序（因爲你綁定的處理程序全部div元素）。由於container處理程序第二次觸發，這就是結果#clicked_info。（div3放在那裏由第一個處理程序，但立即更換。）

爲了解決這個問題，有幾種解決方案。我的優選解決方案是應用始發功能，這是event對象的屬性target的id：

$(this).click(function(event){ 
    $('#clicked_info').html(event.target.id); 
}); 

Modified example。請注意，我還簡化了代碼：each呼叫是不必要的，因爲click綁定到選擇中的每個元素。

我認爲這個解決方案比停止傳播更好，因爲它不會停止傳播！傳播通常很有用（畢竟這就是它存在的原因），而代碼的其他方面可能依賴它。