Question

当用户点击我的菜单中不包含任何其他类型内容/类的部分时，我一直在尝试捕获该事件。

菜单本身被分成两个部分，两个部分都是浮动的（一个在右边，另一个在左边），我只是试图抓住当父div（菜单）内部和漂浮的div。

标记：

<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

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

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

这将使这些事件不再冒出高潮。

或者，您可以检查事件目标是否是正确的元素：

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

Updated fiddle.

Answer 2

将this与e.target进行比较。如果它们相同，则处理事件的元素将与它所源自的元素相同。

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

jsFiddle

选择不包含类的Div - jQuery

2 个答案: