1

这类似于 facebook 和 google 通知按钮，您单击它们并弹出一个窗口，如果您再次单击该按钮或单击不属于通知 div 的任何部分，则会关闭。

我的问题是我找不到取消单击对象或单击对象的事件。

这就是我现在所拥有的，只有重新单击按钮才能关闭弹出的内容。

notifycounter.click(function() {
    return imagepanel.toggle();
});

这是我尝试过的，但两个事件都没有触发：

notifycounter.focusin(function() {
  return imagepanel.toggle();
});
notifycounter.focusout(function() {
  return imagepanel.hide();
});

通知计数器是一个 h3

图像面板是一个 img

4

2 回答 2

2

试试这个。

notifycounter.click(function(e) {
    imagepanel.toggle();
    e.stopPropagation();//this will stop the event bubbling
});

$(document).click(function(){
   if(imagepanel.is(':visible')){
      imagepanel.hide(); 
   }
});

您可以像这样优化它。

notifycounter.click(function(e) {
    imagepanel.toggle();
    e.stopPropagation();//this will stop the event bubbling

    if(imagepanel.is(':visible')){
        $(document).one('click.imagepanel', function(){
             imagepanel.hide(); 
        });
    }
    else{
        $(document).unbind('click.imagepanel');
    }
});
于 2012-04-03T19:43:22.643 回答
1

您可以绑定到document元素并检查事件的目标是否是正确的元素：

$(document).on('click', function (event) {
    if (event.target == 'my-element-id') {
        //the element was clicked-on
    } else {
        //something other than the element was clicked-on
        $('#my-element-id').hide();
    }
});

您还可以使用event.stopPropagation()阻止事件传播到document元素：http ://api.jquery.com/event.stopPropagation/

$('#my-element-id').on('click', function (event) {
    event.stopPropagation();
});
$(document).on('click', function () {
    $('#my-element-id').hide();
});

只有点击元素以外的元素#my-element-id才会触发document点击事件处理程序。

请注意，这.on()是 jQuery 1.7 的新版本，在这种情况下，.bind()如果您使用的是旧版本，则可以替换为：http: //api.jquery.com/on

于 2012-04-03T19:41:45.940 回答