選擇不包含任何類的div - jQuery

Question

當用戶單擊不包含任何其他類型的內容/類的菜單部分時，我一直試圖捕獲該事件。

菜單本身被分成兩部分，兩部分都是浮動的（一個在右邊，另一個在左邊），我只是試圖抓住點擊發生在父div（菜單）內部和外部浮動的divs。

標記：

<div id='test'> 
    <div class='t1'> 
    </div> 
    <div class='t2'> 
    </div> 
</div> 

CSS

#test 
{ 
    background-color: red; 
    height: 30px; 
    width: 50%; 
    position: relative; 

} 
.t1 
{ 
    float: left; 
    width: 45%; 
    height: 30px; 
    background-color: blue; 
    margin: 0; 
    padding: 0; 
} 

.t2 
{ 
    float: right; 
    width: 10%; 
    height: 30px; 
    background-color: blue; 
    margin: 0; 
    padding: 0; 
} 

實施例：

jsFiddle Example!

我主要想知道是否可以通過jQuery使用選擇器，而不是另一種方法來檢查點擊的內容並確定是否點擊了正確的區域。 （這兩種方法都是可以接受的，但。）

Answer 1

比較this到e.target。如果它們相同，則處理該事件的元素將與其起源的元素相同。

$('#test').click(function(e) 
{ 
    if (this === e.target) { 
     alert('#test itself clicked'); 
    } else { 
     alert('some child element was clicked'); 
    } 
}); 

jsFiddle。

Answer 2

您可以添加的處理程序包含的元素：

$('#test *').click(function(e) { 
    e.stopPropagation(); 
}); 

，留住這些事件冒泡到頂部。

或者，你可以檢查，看看是否該事件的目標是正確的元素：

$("#test").click(function(e) { 
    if (this === e.target) alert("success!"); 
}); 

Updated fiddle.