上点击隐藏引导酥料饼外酥料饼

我试图隐藏引导酥料饼当用户点击酥料饼以外的任何地方。（我真的不确定为什么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

上点击隐藏引导酥料饼外酥料饼

回答

相关问题