.一个事件一次又一次地被解雇

.on event keeps getting fired over and over again

本文关键字：一次又一次 事件 一个      更新时间：2023-09-26

我试图设置一个事件，它在我的元素打开后触发。我有一个工具提示和一个click事件来显示工具提示。当这种情况发生时，我设置了一个文档点击事件，如果用户点击舞台上的任何地方，它就会删除所有的工具提示。但它在工具提示显示之前就被调用了。它一遍又一遍地触发文档事件。

 $('.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');
    };

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

$(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();
});

演示:http://jsfiddle.net/dirtyd77/uPHk6/8/

注:我建议从on函数中删除.tooltip，如

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