如何獲取單擊的元素？

Question

我的html中有一個簡單的div如下：

<div id="myDiv">
....

</div>

我還在 window.click上設置了onlick事件，如下所示：

window.onclick = function()
{
    // do something
 }  

所以，如果我點擊div中的任何地方，我怎么才能發現這個點擊是在“myDiv”中進行的

注意：我無法在div上添加click事件，它是從jqgrid隨機生成的

Answer 1

$(document).on("click","#myDiv", function (event) {
     alert(event.target.id);
});

Answer 2

從函數中獲取事件： window.onclick = function(event)然后在函數內部，你可以將它用作event.target ：

window.onclick = function(event)
{
    alert(event.target);
}

Answer 3

這是使用addEventListener的示例 - 不使用jQuery

document.getElementById('myDiv').addEventListener('click',function(e){
    // this div has been clicked
    console.log('this div has been clicked');
});

UPDATE

這是動態創建元素的非jQuery解決方案

document.addEventListener('click',function(e){
    if( e.target.id == 'myDiv' )
    {
        // this div has been clicked
        console.log('this div has been clicked');
    }
});

Answer 4

我純粹是為了澄清與@Nishit Maheta就我對他的回答進行投票的討論。

這個問題的目的就是這個。 “我希望知道何時點擊動態添加的div”。 您看到動態添加的那一刻認為委托事件！ :)

由於這個問題允許使用jQuery， 因此@erkaner的答案接近理想情況。 我只想解釋為什么它是適當的解決方案 。

$(document).on("click","#myDiv", function (event) {
     // Do something
});

說明：

• 這使用了jQuery 委托的事件處理程序 。 事件處理被“委托”給預期目標的不變的祖先，因此命名。
• 在這種情況下，選擇的祖先是document 。
• 您應該使用最接近目標的不變祖先，但如果沒有其他更接近/方便，則document是最佳默認值。
• 警告：不要將body用於委派事件，因為它有一個錯誤（樣式可能導致它不會出現冒泡的鼠標事件）。
• 事件（在這種情況下click ）冒泡到處理程序元素（即文檔）。
• 然后，jQuery選擇器（在本例中為#myDiv ）僅應用於bubble-chain中的元素 。 這非常有效。
• 然后，提供的處理函數僅應用於導致事件的任何匹配元素。

所有這一切的結果是元素在事件時間之前不需要存在（當事件被注冊時不需要存在）。

此外，因為委托通常用於鼠標事件 （而不是每秒50,000次），所以它與“原始”事件處理程序之間的速度差異可以忽略不計。 好處遠遠超過任何微不足道的速度差異。

關於其他onclick=答案

• 首先，使用單個window.onclick屬性是一個壞主意，因為你停止使用它的任何其他東西（不是任何使用jQuery的人都應該使用它）。
• 其次，所有瀏覽器都不提供傳遞給onclick的事件參數（這應該足以阻止任何人使用它）。 有一些解決方法，但創建jQuery是為了避免瀏覽器的變通方法:)

筆記：

如果命名不在您的控制范圍內，您只需要匹配的內容即可。 最糟糕的情況是，它可以像“匹配任何表格下的任何div”一樣簡單，但這取決於您的特定HTML和代碼：

$(document).on("click","table div", function (event) {
     // Do something
});

這是一個實際的例子：

http://jsfiddle.net/TrueBlueAussie/eyo5Lnsy/

@Sashi Kant：如果您可以提供頁面HTML輸出的樣本（例如從瀏覽器中保存），我將很樂意為您提供的任何變體提供:)

Answer 5

 var myDiv = document.getElementById('myDiv'); myDiv.style.cursor = 'pointer'; myDiv.onclick = function() { //DO SOMETHING }; 

Answer 6

開始了。

$('body').click(function(e) {      
  if (e.target.id == 'myDiv') {
    alert('My Div!!!!');
  }
});​

Answer 7

 $( "body" ).click(function( event ) { $( "#log" ).html( "clicked: " + event.target.nodeName ); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="myDiv"> .... </div> <div id="log"></div> 

Answer 8

檢查以下代碼。 檢查DEMO

使用event.target獲取被點擊的元素。

window.onclick = function(event)
{
  if(event.target.id == "myDiv"){
    alert("here")
  }else{
    alert('Body')
  }
 console.log(event.target.id)
}