bootstrap里popover实现点击区域外关闭隐藏的方法[原创]亲测 原创 收藏


  • :
  • 04-13 23:17
  • :
  • 563次
  • :
  • 0条
  • 3赞

简介在使用bootstrap的popover组件时,实现点击popover外的其它地方关闭隐藏popover的方法及实例。

站长在做的web项目里,用到了bootstrap的popover组件,要求:

  1. 鼠标放上去,或点击时显示popover;

  2. 鼠标移开后,popover不会关闭和隐藏;

  3. 当点击网页的其它地方时,要关闭popover; 

功能很简单,站长很快就写好了,但抱着学习和优化的目的,就到网上找了下类似的文章,竟然发现,(不要笑)网上的方法好像还不如我的方法,-_-!!!

看了好几个网站,内容都一样,方法也都是这个:

$('body').on('click', function(event) {
    var target = $(event.target); 
    if (!target.hasClass('popover')
            && target.parent('.popover-content').length === 0
            && target.parent('.myPopover').length === 0
            && target.parent('.popover-title').length === 0
            && target.parent('.popover').length === 0 && target.attr("id") !== "folder") {
        $('#ID').popover('hide');
    }
});

这个方法是没有问题的,这个方法的思路就是在body上添加个click事件,这个事件可以监听所有触发"click"事件的元素标签,然后通过判断这个元素标签是不是popover,或是否是popover里的元素,然后来关闭popover。

但在站长看来,为了关闭一个“小小的”popover,竟然要在body上绑定一个一直存在的事件,有点“大材小用”和“大费周章”的感觉,当然也可能是站长自己的web里,popover用到的不多,才有这样的感觉。

下面是站长自己的代码:

$("[t='popover']").on("click mouseenter",function(e){
    e.stopPropagation();
    var $this=$(this);
    $this.popover("show");
    $(document).one("click",function(){
    	$this.popover("hide");
    });
    $(".popover").on("click",function(e){
    	e.stopPropagation();
    });
});

下面站长来给刚接触jquery的人讲解一下这段代码:

$("[t='popover']").on("click mouseenter",function(){}); 这段的意思是,为页面里带有属性t="popover"的元素,绑定click和mouseenter,即点击和鼠标放上去的事件;

e.stopPropagation();  这句的意思是阻断事件的继承,也就是我们通常说的“冒泡”了;

$this.popover("show"); 这一句就是显示popover了;

$(document).one("click",function(){}); 这一句是为document对象绑定一个一次性的事件;

好了,程序里涉及到的知识点就是上面这些了,道理也很简单,在popover显示后,就为document绑定个一次性事件,实现点击后隐藏popover,并且通过stopPropagation来阻断事件冒泡到popover自身,及我们点击的那个元素。

站长自认为,自己写的这段代码的优点就是“节省资源”,为document绑定的就是个一次性事件,执行后,这个事件就取消了,不浪费资源,当然这也可能只是站长自己的“强迫症”吧!

这里是完整的在线实例:bootstrap里点击popover区域外隐藏的在线演示



您正在找的文章可能是: