jquery - 阻止父元素触发事件的子元素

Question

我有一个 parent <span>嵌套元素 <em>元素。 <span>给定宽度和 display:block通过 CSS。

<span>上面有一个 jQuery 触发事件，该事件已正确触发，但如果您滚动其中一个子项，则会触发鼠标移开事件，并且我的 Twitter Bootstrap 弹出窗口会消失。

有没有办法“隐藏”子元素以防止这种情况发生？

/*** 更新代码示例 **/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 - 我已经用 fiddle 中的 click 替换了 mouseover 事件，以便轻松验证功能)