Jquery on.mouseenter 和 on.click 在移动设备上的相同行为错误

Question

我正在尝试创建一个 float 操作按钮(FAB)...在桌面上，当我将鼠标悬停在 FAB 上时，它正常打开......但是...在移动设备上，我需要单击两次才能打开...

在移动设备上，我发现，当我第一次单击时，mouseenter 的行为方式与单击相同，只有第一次单击才表现为正常单击...因此，我需要单击 2 次而不是只有一次!我以为 mouseenter 和 mouseleave 不能在移动设备上工作，只能在桌面上工作，事实并非如此......所以我真的不知道如何在悬停在桌面上并在移动设备上仅单击 1 次时打开我的 FAB。 ..

有什么想法吗？非常感谢您的帮助!

  <div class="fixed-action-btn" style="bottom: 35px; right: 24px;">
    <a class="btn-floating">
      <i>FAB</i>
    </a>
    <ul>
      <li><a class="btn-floating">Action 1</a></li>
      <li><a class="btn-floating">Action 2</a></li>
      <li><a class="btn-floating">Action 3</a></li>
    </ul>
  </div>

(function ($) {
  var _this = this;

  $(document).ready(function () {
    $(document).on('mouseenter', '.fixed-action-btn', function () {
      var $this = $(this);
      openFABMenu($this);
    });
    $(document).on('mouseleave', '.fixed-action-btn', function () {
      var $this = $(this);
      closeFABMenu($this);
    });
    $(document).on('click', '.fixed-action-btn', function (e) {
      e.preventDefault();
      toggleFABMenu($('.fixed-action-btn'));
      return false;
    });
  });

  function openFABMenu(btn) {
    var fab = btn;

    if (!fab.hasClass('active')) {
      fab.addClass('active');
      var btnList = document.querySelectorAll('ul .btn-floating');
      btnList.forEach(function (el) {
        el.classList.add('shown');
      });
    }
  };

  function closeFABMenu(btn) {
    var fab = btn;
    fab.removeClass('active');
    var btnList = document.querySelectorAll('ul .btn-floating');
    btnList.forEach(function (el) {
      el.classList.remove('shown');
    });
  };

  function toggleFABMenu(btn) {
    var elem = btn;

    if (elem.hasClass('active')) {
      closeFABMenu(elem);
    } else {
      openFABMenu(elem);
    }
  }
})(jQuery);

Answer 1

mouseenter 不适用于移动设备。如果可以的话，您可能应该始终在移动设备中显示 fabMenu。