如何在移动设备上手动触发 mouseleave 事件

Question

我想在 hover 上将 link 颜色更改为橙色。

在移动设备上，当用户触摸 link 时，它会变成橙色并一直保持橙色，直到用户点击离开。所以我想手动触发 mouseout 事件，以便 link 在 1 秒后失去它的悬停效果。

这是我尝试过的方法，但是 link 在 1 秒后仍然是橙色：

$(window).on('load', function() {
  $('a').on('click', function() {
    
    // on a mobile device, I want the hover effect to end after 1 seconds
    window.setTimeout(function() {
      $('a').trigger('mouseout');
    }, 1000);
  
  });
});

a {
  font-size: 2rem;
}

a:hover {
  color: orange;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href='#'>Test</a>
</div>

注意：这是一个简化的示例，在我的代码中我没有使用计时器，而是想在 ajaxcomplete

上触发 mouseout 事件

$(document).on('ajaxComplete', function () {
    $('a').trigger('mouseout');
});

Answer 1

a {
  font-size: 2rem;
}

a:hover {
  color: myanimation 1s 1;
  -webkit-animation:myanimation 1s 1;
}

@keyframes myanimation
{
    0%      {color:orange;}
    100%    {color:orange;}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <a href='#'>Test</a>
</div>

这可以通过 CSS 动画解决，请参见上面的代码片段。

Answer 2

问题是试图强制鼠标移出事件似乎在触摸设备上不起作用。

在触摸设备上触发的一系列事件以 touchstart 事件开始 - 参见例如MDN

If the browser fires both touch and mouse events because of a single user input, the browser must fire a touchstart before any mouse events.

此代码段记住用户已启动触摸事件，而不是对鼠标事件进行操作，而是设置 class 来更改文本颜色。鼠标事件也是如此，只有当用户似乎没有在该元素上使用触摸设备时才会执行此操作。

虽然随后在元素上查找 touchend 事件似乎是合乎逻辑的，但似乎如果用户对其进行长时间触摸，鉴于它是一个锚元素，则不会在该元素上触发 touchend 事件当他们移除 finger/pointing 设备时。然而，它仍然在 window 上触发，因此我们捕获该事件并删除悬停 class.

let usingTouch = false;
const a = document.querySelector('a');
a.addEventListener('touchstart', function() {
  usingTouch = true;
  a.classList.add('hover');
});
window.addEventListener('touchend', function() {
  usingTouch = true;
  setTimeout(function() {
    a.classList.remove('hover');
  }, 1000);
});
a.addEventListener('mouseover', function() {
  if (!usingTouch) a.classList.add('hover');
});
a.addEventListener('mouseout', function() {
  if (!usingTouch) a.classList.remove('hover');
});

a {
  font-size: 2rem;
}

.hover {
  color: orange;
}

<div>
  <a href='#'>Test</a>
</div>

如何在移动设备上手动触发 mouseleave 事件

How to manually trigger the mouseleave event on a mobile device

javascript

css

jquery

touchscreen

mouseleave