Question

我正在Firefox中测试一个Web应用程序，并且遇到了一些非常奇怪的错误（这些错误我在Safari或Chrome中从未见过）。

我认为，其中最具破坏性的因素是event.preventDefault()未能按Firefox预期的那样触发。（请参见this和this）。

但是，我遇到的特定问题与附加了引导程序工具提示的按钮上的click事件有关。在这里，event.preventDefault();在Firefox中似乎无法正常运行（但在Chrome和Safari中却可以正常运行）。

下面是说明此问题的代码段。单击中间的星星会触发两个警报（一个警报带有$('#id).val();。这在Safari和Chrome中可以正常工作，但在Firefox中不起作用：

$('[data-toggle="tooltip"]').tooltip({ trigger: "hover" });

$('#myCard:not(i, button)').on('click', function(){
  $('#goBtn').toggleClass('d-none');
})


$('.fa-star, .fa-thumbs-up').on('click', function (event) {
  event.preventDefault();
  event.stopPropagation();
});

$('#favouriteCard .fa-star').on('click', favourite);

function favourite(e){
  e.preventDefault();
  let id = $('#id').val();
  alert("You clicked on me!")
  alert(id);
}

.fa-star {
  color: red;
  &:hover{
    cursor: pointer;
  }
  
}


.card:hover{
  border: 1px solid black;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<div class='container mt-4'>
  <input type="hidden" id="id" name="user[id]" value="abcd1234">

  <div class='row'>

    <div class='col-6'>
      <div id="myCard" class='card'>
        <div class='card-header'>
          My card
        </div>
        <div class='card-body mx-auto'>
          <i class="fas fa-star"></i>
          <button id="favouriteCard" data-toggle="tooltip" data-placement="top" title="Add to favourites"><i class="fa fa-star"></i></button>
          <i  class="fas fa-thumbs-up"></i>
        </div>
        <div class='card-footer'>
        </div>
       
      </div>
  

    </div>
    <div class='col-6'>
      <button id='goBtn' class='btn btn-primary d-none ml-4'>Clicked on card</button>
      </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Same thing as a fiddle

但是，如果我删除：
<button id="favouriteCard" data-toggle="tooltip" data-placement="top" title="Add to favourites"><i class="fa fa-star"></i></button>
并更改：
$('#favouriteCard .fa-star')至$('.fa-star')
然后可以在Firefox中按预期工作。

我想念什么？

引导程序工具提示，event.preventDefault（）和Firefox

0 个答案: