javascript - 带有图标字体的 Bootstrap 按钮重复 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 Angular 色:

.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

The mouseenter event is fired when a pointing device (usually a mouse) is moved over the element that has the listener attached.

Similar to mouseover, it differs in that it doesn't bubble and that it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space.

MDN