上點擊隱藏引導酥料餅外酥料餅

我試圖隱藏引導酥料餅當用戶點擊酥料餅以外的任何地方。（我真的不確定爲什麼Bootstrap的創建者決定不提供此功能。）上點擊隱藏引導酥料餅外酥料餅

我發現下面的代碼on the web但我真的不明白它。

// Hide popover on click anywhere on the document except itself 
$(document).click(function(e) { 
    // Check for click on the popup itself 
    $('.popover').click(function() { 
     return false; // Do nothing 
    }); 
    // Clicking on document other than popup then hide the popup 
    $('.pop').popover('hide'); 
});

我覺得困惑的主要是行$('.popover').click(function() { return false; });。這行不是爲click事件添加事件處理程序嗎？這是如何防止隱藏popover的電話popover('hide')？

還有誰見過更好的技術？

注：我知道這個問題的變化之前已經在這裏問，但這些問題的答案涉及代碼要比上面的代碼更加複雜。所以我的問題實際上是關於上面的代碼

來源

2013-07-24 Jonathan Wood

閱讀此：http：// stackoverflow。com/questions/1357118/event-preventdefault-vs-return-false – Icarus

@Icarus：謝謝，但這並沒有真正回答我的問題。我知道返回false會停止進一步的處理，但是如何添加點擊處理程序來改變隨後行的行爲？在彈出窗口關閉後，這不會阻止點擊工作嗎？ –

該代碼完全符合您所描述的內容。每次有人在文檔的任何地方點擊（包括'.popover'），它都會添加一個事件監聽器，它完全不會做任何事情。這只是一種內存浪費，因爲在同一個元素上可能有很多事件監聽器，對於同一個事件，他們只會結束堆疊在一起 – Dogoku

我做http://jsfiddle.net/BcczZ/2/，它希望回答您的問題

例HTML

<div class="well> 
    <a class="btn" data-toggle="popover" data-content="content.">Popover</a> 
    <a class="btn btn-danger bad">Bad button</a> 
</div>

var $popover = $('[data-toggle=popover]').popover(); 

//first event handler for bad button 
$('.bad').click(function() { 
    alert("clicked"); 
}); 


$(document).on("click", function (e) { 
    var $target = $(e.target), 
     isPopover = $(e.target).is('[data-toggle=popover]'), 
     inPopover = $(e.target).closest('.popover').length > 0 

    //Does nothing, only prints on console and wastes memory. BAD CODE, REMOVE IT 
    $('.bad').click(function() { 
     console.log('clicked'); 
     return false; 
    }); 

    //hide only if clicked on button or inside popover 
    if (!isPopover && !inPopover) $popover.popover('hide'); 
});

正如我在評論中提及，事件處理程序不會被覆蓋，它們只是堆棧。既然已經有上.bad按鈕的事件處理程序，它會被解僱，與任何其他事件處理一起

打開中的jsfiddle您的控制檯，按5頁（不酥料餅的按鈕），然後在某處次點擊bad button你應該可以看到單擊了打印的時間相同數量的你按下

希望它可以幫助

PS： 如果你仔細想想，你已經看到這種情況發生，尤其是在jQuery的。想想存在於使用多個jquery插件的頁面中的所有$(document).ready(...)。該行只對註冊文件的ready事件

來源

2013-07-24 19:26:27 Dogoku

好的，謝謝你的演示。看着我最初發布的代碼，看起來對我來說似乎並不理想，因爲我可能會添加一個新的處理程序，它只是整天返回false。如果頁面未刷新，可能會變成任意數量。看起來並不理想。 –

只是刪除處理「壞按鈕」的代碼並使用我的代碼的其餘部分。應該像你想要的那樣工作 – Dogoku

我只是做了更多的基於事件的解決方案的事件處理程序。

var $toggle = $('.your-popover-button'); 
$toggle.popover(); 

var hidePopover = function() { 
    $toggle.popover('hide'); 
}; 

$toggle.on('shown', function() { 
    var $popover = $toggle.next(); 
    $popover.on('mousedown', function(e) { 
     e.stopPropagation(); 
    }); 
    $toggle.on('mousedown', function(e) { 
     e.stopPropagation(); 
    }); 
    $(document).on('mousedown',hidePopover); 
}); 

$toggle.on('hidden', function() { 
    $(document).off('mousedown', hidePopover); 
});

來源

2014-04-25 14:01:42 ikuegelgen

簡短的回答插入此來引導min.js

時跳隙的onblur會隱藏酥料餅
時彈出式視窗不止一個，年紀大酥料餅將被隱藏

$count=0;$(document).click(function(evt){if($count==0){$count++;}else{$('[data-toggle="popover"]').popover('hide');$count=0;}});$('[data-toggle="popover"]').popover();$('[data-toggle="popover"]').on('click', function(e){$('[data-toggle="popover"]').not(this).popover('hide');$count=0;});

來源

2015-09-08 14:25:28

的非上面的解決方案爲我工作100％，因爲我不得不單擊雙擊另一個或相同的彈出窗口再次打開它。我從頭開始編寫解決方案，使其變得簡單而有效

$('[data-toggle="popover"]').popover({ 
     html:true, 
     trigger: "manual", 
     animation: false 
    }); 

    $(document).on('click','body',function(e){ 
     $('[data-toggle="popover"]').each(function() { 
      $(this).popover('hide'); 
     }); 

     if (e.target.hasAttribute('data-toggle') && e.target.getAttribute('data-toggle') === 'popover') { 
      e.preventDefault(); 
      $(e.target).popover('show'); 
     } 
     else if (e.target.parentElement.hasAttribute('data-toggle') && e.target.parentElement.getAttribute('data-toggle') === 'popover') { 
      e.preventDefault(); 
      $(e.target.parentElement).popover('show'); 
     } 
    });

來源

2017-05-11 08:20:32

上點擊隱藏引導酥料餅外酥料餅

回答

相關問題