阻止父

Question

我有一个带有嵌套<span>元素的父<em>元素。 <span>通过CSS获得宽度和display:block。

<span>上有一个jQuery触发器事件，它被正确触发但是如果翻转其中一个子项，则会触发mouse out事件并且我的Twitter Bootstrap popover消失。

有没有办法隐藏＆＃34;孩子的元素，以防止这种情况发生？

/ ***更新代码示例** / Th stopPropagation（）无效。

$("#div").on('mouseover', '.badge', function () {


                //prevent child items from closing our popover
                $(this).on('mouseenter', 'em', function (e) {
                    e.stopPropagation();
                })

                $(this).popover({
                    template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                    title: 'Title',
                    content:"Some content",
                    html: true,
                    placement: 'auto',
                    trigger:'manual'
                });

                $(this).popover('show');

        });

Answer 1

根据更新的代码，您不需要event.stopPropagation()来抑制子元素上的事件。您可以使用e.target来定位触发事件的元素，并利用它来确定应该采取什么行动。

$("#div").on('mouseover','.badge',function (e) {        
         if($(e.target).attr("class") == undefined) {  // since em doesn't have class attribute , this would return 'undefined'
              return true;
          }

           $(this).popover({
                template: '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-title"></h3><div class="popover-content"></div></div>',
                title: 'Title',
                content:"Some content",
                html: true,
                placement: 'auto',
                trigger:'manual'
            });

            $(this).popover('show');            
    });

工作示例：http://jsfiddle.net/ao1L2Lce/2/

（P.S - 我已将mouseover事件替换为小提琴中的click，以便轻松验证功能。

Answer 2

我想出了一个解决方法，在那里我在“徽章”的顶部放置了一个透明的背景span元素，并在其上放置了popover事件。