使用jQuery.scrollTop()在聚焦事件中改变垂直滚动位置时，不会触发单击事件

Question

我正面临jQuery scrollTop的问题。请检查下面的代码。当我第一次点击按钮时，点击事件没有被触发。有什么办法可以克服这个问题吗?在IE中它工作得很好。我有这个chrome

$(document).ready(function(){
  $('#goTop').on('focusin',function(){
    $('body').scrollTop('0');
  })
  $('#goTop').on('click',function(){
    alert('clicked');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in dolor lectus. Vestibulum facilisis aliquet bibendum. Aliquam vestibulum ullamcorper elit interdum accumsan. Aenean consectetur placerat pulvinar. Integer id libero vel odio mollis lobortis
  sed semper turpis. Ut at velit et mi faucibus egestas. Curabitur sed ultrices libero. Sed efficitur ex eu posuere congue. Pellentesque non gravida tellus. Sed ut fringilla nunc. Suspendisse sit amet fringilla purus. Vestibulum id augue mi. Suspendisse
  felis elit, porta vel varius eget, mattis vitae felis. Proin interdum scelerisque blandit. Vestibulum eget massa eget ex congue pulvinar. Aliquam vulputate congue ante quis euismod. Nulla sit amet sapien nec odio placerat varius. Etiam varius pulvinar
  risus, ac dignissim ligula. Fusce enim urna, ultricies id euismod nec, lacinia ac ante. Phasellus a nisi vestibulum nisi pretium sollicitudin. Aliquam sit amet ligula ex. Nam egestas ac mauris id mattis. Maecenas bibendum quam non nibh porta mollis.
  Ut laoreet mi elit, a pulvinar quam auctor eget. Phasellus sit amet pulvinar diam. Praesent sed nisl justo. Curabitur facilisis justo ut enim placerat consectetur. Integer odio ligula, venenatis ac tempor id, bibendum eu turpis. Donec laoreet, risus
  sit amet commodo feugiat, turpis ex venenatis arcu, ultricies tincidunt felis diam at tortor. Suspendisse dictum lorem ligula. Ut tristique consequat quam, in fringilla nibh porta at. Maecenas sit amet neque ut ex molestie congue. Nam sed sagittis nisl.
  Ut lobortis arcu quis arcu facilisis, ac maximus ex dignissim. Proin id lobortis massa, sed mollis eros. Curabitur tristique aliquam pretium. In imperdiet fringilla suscipit. Donec imperdiet mauris molestie, laoreet urna sed, pellentesque libero. Ut
  aliquet a tellus in rhoncus. Vivamus non ultrices erat. Aenean sed scelerisque nibh, vitae sagittis dolor. Praesent quis neque risus. Suspendisse vitae nisl lacinia, sagittis nibh a, molestie orci. Suspendisse eu aliquet ante. Cras in erat porta, condimentum
  nisl id, tempus odio. Nullam ut ante feugiat, molestie erat ut, ultrices augue. Mauris mattis fermentum tincidunt. Fusce vel euismod dui. Quisque non lobortis quam. Pellentesque massa elit, scelerisque a lacus eget, consequat congue ligula. Fusce hendrerit
  aliquet arcu at ultrices. Aliquam faucibus nunc vel imperdiet auctor. Maecenas quis fringilla turpis. Nulla venenatis neque massa, ut sagittis augue finibus in. Aenean felis odio, mollis in consequat vel, porta eu neque. Donec elementum mollis neque,
  vitae luctus risus molestie nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer arcu leo, congue et neque at, tempus imperdiet mauris. Vestibulum eros ligula, laoreet non enim nec, viverra vestibulum augue.
  Suspendisse potenti. Aliquam nec fringilla turpis. Fusce lobortis nunc ac ligula vulputate, quis rhoncus mi dapibus. In non pharetra nibh, non tempus ex. Phasellus non lorem non justo ornare ultricies. Cras turpis diam, malesuada in neque in, ultricies
  iaculis quam. Mauris tempus est ut mauris facilisis ultricies. Vivamus mollis mi sed nulla sodales, id pellentesque ante consequat. Mauris facilisis id felis ac viverra. Nulla cursus pellentesque volutpat. Aenean et elit in lectus elementum ullamcorper.
  Donec feugiat interdum odio, vel vulputate ipsum pellentesque at. Praesent at eros massa. Vivamus sapien diam, hendrerit non risus ac, sollicitudin volutpat augue. Donec non pharetra turpis, a venenatis sem. In consectetur vitae magna a vestibulum.
  Ut lacinia aliquet sagittis.
</div>
<input type='button' id='goTop'value='Go Top' />

Answer 1

您可以使用mousedown事件，而不是click，这似乎是Chrome浏览器上的一个错误，使用Firefox我得到警报消息，但没有滚动效果。然而，我会选择一个不同的解决方案，像这样:

$(document).ready(function(){
  $('#goTop').on('focusin',function(){
    $('body').scrollTop('0');
  })
  $('#goTop').on('mousedown',function(){
    alert('clicked');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc in dolor lectus. Vestibulum facilisis aliquet bibendum. Aliquam vestibulum ullamcorper elit interdum accumsan. Aenean consectetur placerat pulvinar. Integer id libero vel odio mollis lobortis
  sed semper turpis. Ut at velit et mi faucibus egestas. Curabitur sed ultrices libero. Sed efficitur ex eu posuere congue. Pellentesque non gravida tellus. Sed ut fringilla nunc. Suspendisse sit amet fringilla purus. Vestibulum id augue mi. Suspendisse
  felis elit, porta vel varius eget, mattis vitae felis. Proin interdum scelerisque blandit. Vestibulum eget massa eget ex congue pulvinar. Aliquam vulputate congue ante quis euismod. Nulla sit amet sapien nec odio placerat varius. Etiam varius pulvinar
  risus, ac dignissim ligula. Fusce enim urna, ultricies id euismod nec, lacinia ac ante. Phasellus a nisi vestibulum nisi pretium sollicitudin. Aliquam sit amet ligula ex. Nam egestas ac mauris id mattis. Maecenas bibendum quam non nibh porta mollis.
  Ut laoreet mi elit, a pulvinar quam auctor eget. Phasellus sit amet pulvinar diam. Praesent sed nisl justo. Curabitur facilisis justo ut enim placerat consectetur. Integer odio ligula, venenatis ac tempor id, bibendum eu turpis. Donec laoreet, risus
  sit amet commodo feugiat, turpis ex venenatis arcu, ultricies tincidunt felis diam at tortor. Suspendisse dictum lorem ligula. Ut tristique consequat quam, in fringilla nibh porta at. Maecenas sit amet neque ut ex molestie congue. Nam sed sagittis nisl.
  Ut lobortis arcu quis arcu facilisis, ac maximus ex dignissim. Proin id lobortis massa, sed mollis eros. Curabitur tristique aliquam pretium. In imperdiet fringilla suscipit. Donec imperdiet mauris molestie, laoreet urna sed, pellentesque libero. Ut
  aliquet a tellus in rhoncus. Vivamus non ultrices erat. Aenean sed scelerisque nibh, vitae sagittis dolor. Praesent quis neque risus. Suspendisse vitae nisl lacinia, sagittis nibh a, molestie orci. Suspendisse eu aliquet ante. Cras in erat porta, condimentum
  nisl id, tempus odio. Nullam ut ante feugiat, molestie erat ut, ultrices augue. Mauris mattis fermentum tincidunt. Fusce vel euismod dui. Quisque non lobortis quam. Pellentesque massa elit, scelerisque a lacus eget, consequat congue ligula. Fusce hendrerit
  aliquet arcu at ultrices. Aliquam faucibus nunc vel imperdiet auctor. Maecenas quis fringilla turpis. Nulla venenatis neque massa, ut sagittis augue finibus in. Aenean felis odio, mollis in consequat vel, porta eu neque. Donec elementum mollis neque,
  vitae luctus risus molestie nec. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer arcu leo, congue et neque at, tempus imperdiet mauris. Vestibulum eros ligula, laoreet non enim nec, viverra vestibulum augue.
  Suspendisse potenti. Aliquam nec fringilla turpis. Fusce lobortis nunc ac ligula vulputate, quis rhoncus mi dapibus. In non pharetra nibh, non tempus ex. Phasellus non lorem non justo ornare ultricies. Cras turpis diam, malesuada in neque in, ultricies
  iaculis quam. Mauris tempus est ut mauris facilisis ultricies. Vivamus mollis mi sed nulla sodales, id pellentesque ante consequat. Mauris facilisis id felis ac viverra. Nulla cursus pellentesque volutpat. Aenean et elit in lectus elementum ullamcorper.
  Donec feugiat interdum odio, vel vulputate ipsum pellentesque at. Praesent at eros massa. Vivamus sapien diam, hendrerit non risus ac, sollicitudin volutpat augue. Donec non pharetra turpis, a venenatis sem. In consectetur vitae magna a vestibulum.
  Ut lacinia aliquet sagittis.
</div>
<input type='button' id='goTop'value='Go Top' />