带有图标字体的引导按钮重复 JavaScript 事件问题

Question

我有以下按钮：

<a href="/operation" class="btn btn-xlg btn-marine center-block" title="" data-original-title="Manage active jobs' Operations" aria-describedby="tooltip598388">
  <i class="fox-operation"></i>Operations
</a>

这是它的 CSS 角色：

.btn-xlg {
    padding: 20px 16px;
    font-size: 24px;
    line-height: 1.3333333;
    border-radius: 6px;
    text-shadow: 1px 0 2px #000;
    font-weight: 600;
}
.btn.btn-xlg i {
    float: left;
    border-right: solid 2px;
    display: inline-block;
    height: 72px;
    padding: 20px 5px 0 0;
    margin-top: -20px;
    margin-bottom: -26px;
}
.btn-marine {
    color: #fff;
    background-color: #0AA;
    border-color: #0AA;
}
.center-block {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.fox-operation:before {
    content: '\e801';
}
[class^="fox-"]:before, [class*=" fox-"]:before {
    font-family: "fox";
    font-style: normal;
    font-weight: normal;
    speak: none;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    /* opacity: .8; */
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    font-size: 120%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3);
}

我使用Animate.css 来保持动画效果，同时将按钮悬停如下：

<script>
      $(document).ready(function(){
          var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          $(".btn-xlg").hover(function(){

              $(this).addClass('animated bounce').one(animationEnd, function() {
            $(this).removeClass('animated bounce');

        });
          })
      })
      </script>

问题是在将按钮从文本移动到图标字体后，似乎再次调用了悬停事件。我尝试使用mouseover 而不是hover，我也尝试了选择器a.btn.btn-xlg:not('i')，但结果相同。我不知道为什么当我在同一个元素 a 上时 JavaScript 会重新调用事件？

查看此DEMO。

Answer 1

尝试使用mouseenter 事件而不是mouseover：

$(document).ready(function(){
    var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
          
    $(".btn-xlg").on("mouseenter", function(){
        $(this).addClass('animated bounce').one(animationEnd, function() {
            $(this).removeClass('animated bounce');  
        });
    });
});

DEMO

当指点设备（通常是鼠标）移到附加了侦听器的元素上时，会触发 mouseenter 事件。

与鼠标悬停类似，不同之处在于它不会冒泡，并且当指针从其后代的物理空间之一移动到其自己的物理空间时不会发送。

MDN