.on事件不断被解雇一次又一次

Question

我试图设置一个事件，在我的元素打开后触发。所以我有一个工具提示，我有一个显示工具提示的点击事件。那么当发生这种情况时，我会设置一个文档点击事件，因此如果用户点击舞台上的任何位置，它将删除所有工具提示。但是，在工具提示甚至有机会展示之前它会被调用。所以它一遍又一遍地发射文档事件。

$('.container img').popover({placement:'top', trigger:'manual', animation:true}) 
    .click(function(evt){ 
     evt.preventDefault(); 
     el = $(this); 

     if(el.hasClass('active')){ 
      el.popover('hide'); 

     }else{ 
      clearDocumentEvent(); 
      el.popover('show'); 

       $(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){ 
        hideAllTooltips(); 

       }); 

     } 

     el.toggleClass('active'); 
    }) 

    var hideAllTooltips = function(){ 
     $('.container img').popover('hide'); 
     $('.container img').removeClass('active'); 
    } 

    var clearDocumentEvent = function(){ 
     $(document).off('click.tooltip touchstart.tooltip'); 
    }; 

Answer 1

问题源于事件冒泡。您可以通过以下测试验证这一点：

$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){ 
    //hideAllTooltips(); 
    console.log($(this)); // will return .container, body, html 
}); 

尝试使用event.stopPropogation()：

$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(e){ 
    e.stopPropagation(); 
    hideAllTooltips(); 
}); 

DEMO： http://jsfiddle.net/dirtyd77/uPHk6/8/

---

附注： 我建议从on去除.tooltip功能如

$(document).on('click touchstart', ':not(.container img)', function(){ 
    e.stopPropagation(); 
    hideAllTooltips(); 
});