Question

我需要在点击页面背景（#page）时触发事件（例如隐藏浮动购物车），但在单击内容时不会发生此事件。所以我需要在空间上发生此事件：页面减去内容。我该如何实现？感谢

如果我有这种结构：

<body>
<div id="page">
   <div id="content">
     here
   </div>
</div>
</body>

var outer= jQuery("#page");
jQuery(outer).click(function(){
  jQuery(cos_de_cumparare).toggle();
});

Answer 1

你可以检查事件的目标并采取相应的行动

var outer= jQuery("#page");
outer.click(function(e){
       //trigger the event only if the target of the click is the page
       if(e.target.id === 'page'){
         alert('click');
       }
});

在这里摆弄http://jsfiddle.net/wNsd7/

Answer 2

为此，您可以阻止事件向上传播。

通常的做法是将click事件附加到子元素并从那里停止传播，以便：

$("#page div").click(function(e){
   e.stopPropagation();
})

Here's an example

Answer 3

尝试此操作并检查http://jsfiddle.net/qgUjb/4/

$("#page").click(function(event) {
   if(event.target.id == "content") return;
   $("#content").toggle();
});

从父div中排除选择器

3 个答案: