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事件。

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

MDN

带图标字体的Bootstrap按钮重复JavaScript事件问题

1 个答案: