JQuery - 檢測哪個div框被點擊

Question

我試圖檢測哪個div框被點擊了JQuery，我不知道我做錯了什麼。我知道，如果單擊div框，可以通過直接調用函數以不同的方法處理此問題，但我希望通過首先確定點擊的方式來完成此操作。

$(document).ready(function() { 
    $(document).click(function(event){ 
     var id = event.target.id; //looks for the id of what was clicked 
     if (id != "myDivBox"){ 
      callAFunction(); 
     } else { 
      callSomeOtherFunction(); 
     } 
    }); 
}); 

謝謝你的任何建議！

Answer 1

不管你點擊一下，你將永遠知道被點擊的元素：

$("#myDiv").click(function(e){ 
    alert("I was pressed by " + e.target.id); 
}); 

知道你不想把它添加到每一個DIV，你有你的點擊您的文檔，你需要弄清楚什麼div可以報告爲「點擊」。

爲了做到這一點，你就會要麼需要在你的DOM元素的嚴格的等級制度（這是anoyingly壞的），或者你可以裝飾「點擊」分區與一個特定的類。

小提琴 - 與以下類似。 https://jsfiddle.net/us6968Ld/

我會用最接近的jquery來得到你想要的結果。

$(document).ready(function() { 
 
    $(document).click(function(event){ 
 
    \t var id = event.target.id; 
 
     var clickDiv = $(event.target).closest('div[class="clickable"]'); 
 
     alert(clickDiv[0].id); 
 
    
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<div class="clickable" id="clickable1"> 
 
<span id="foo"> click me - Foo - clickable 1</span> 
 
</div> 
 
<div id="notClickable1"> 
 
    <div class="clickable" id="clickable2"> 
 
    <span id="span1"> 
 
     Click Me Inside Span 1 - clickable 2 
 
    </span> 
 
    </div> 
 
    <div class="clickable" id="clickable3"> 
 
    <div id="notClickable2"> 
 
     <div id="notClickable3"> 
 
     <span id="click me">Click Me - clickable 3</span> 
 
     </div> 
 
    </div> 
 
    
 
    </div> 
 

 
</div>

Answer 2

您可以使用closest函數來獲取與標籤div始祖元素，看下面的例子：

$(document).ready(function() { 
 
    $(document).click(function(event){ 
 
     var parentDiv = $(event.target).closest("div"); 
 
     console.log(parentDiv.prop("id")); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="div1"> 
 
    <span id="span1">Test1</span> 
 
</div> 
 
<div id="div2"> 
 
    <span id="span2">Test2</span> 
 
</div>

我希望它能幫助您。再見。

Answer 3

試試這個：

$('div').click(function() { 
    alert($(this).attr('id')); 
}); 

https://jsfiddle.net/1ct0kv55/1/