Question

当用户点击背景（<body>）时，我有一个用于滑动div out 视图的脚本。

这是我的代码：

// Slide back out of view.
$('body').click(function(){
    $('.presentationArea').animate({'height': '0px'}, 1000);
});

但是，看，这是问题;如果用户单击页面上的ANYWHERE，则为I.E.菜单链接，按钮，文本字段，图像，以上功能被调用！我只想让用户点击“身体”来调用它，你知道吗，那东西还有其他什么吗？ :)怎么会这样做？

谢谢

Answer 1

您应该检查e.target是否为<body>元素。

Answer 2

您正在经历“冒泡”，您的点击将从子元素一直冒泡到父级并触发该功能。

有关详细信息，请参阅此主题的答案：

How to stop event bubbling with jquery live?

基本上，您必须添加一个新功能，点击该功能return false即可停止冒泡。

$('#wrapper').bind(void(0), false)

假设你有一个包装器div，应该工作，因为第二个参数“false”阻止了冒泡。

Answer 3

使用类似的东西：

// Slide back out of view.
$('body').click(function(event){
    if (event.target === this) {
        $('.presentationArea').animate({'height': '0px'}, 1000);
    }
});

Answer 4

好的，我知道了：

  $("body").click(function(event) {  
    if(event.target.nodeName == "body" || event.target.nodeName == "BODY")
    {
      $('.presentationArea').animate({'height': '50px'}, 1000);
    }
  });

点击“body”时调用jQuery函数

5 个答案: