jQuery-檢測單擊了哪個div框

Question

我正在嘗試檢測使用JQuery單擊了哪個div框，但不確定自己在做什么錯。 我知道如果單擊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

您可以使用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 2

無論您單擊什么，都將始終知道被單擊的元素：

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

知道您不想將其添加到每個div，並且單擊了文檔后，您需要確定可以報告為“ clicked”的div。

為此，您可能需要在DOM中使用嚴格的元素層次結構（這確實很糟糕），或者可以使用特定的類來裝飾“可點擊”的div。

小提琴-類似於下面。 https://jsfiddle.net/us6968Ld/

我會在Jquery中使用最接近的值來獲取想要的結果。

 $(document).ready(function() { $(document).click(function(event){ 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 3

嘗試這個：

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

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