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