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

样本： http://jsfiddle.net/dirtyd77/uPHk6/8/

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

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

.on事件一再被解雇

1 个答案: