我想在悬停
时将链接颜色更改为橙色。
在移动设备上,当用户触摸链接时,链接会变成橙色,并一直保持橙色,直到用户点击离开。所以我想手动触发 mouseout
事件,以便链接在 1 秒后失去悬停效果。
这是我尝试过的,但链接在 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');
});
最佳答案
问题是尝试强制鼠标移出事件似乎在触摸设备上不起作用。
在触摸设备上触发的一系列事件以 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.
此片段记住用户已经启动了触摸事件,并且它设置了一个更改文本颜色的类,而不是对鼠标事件进行操作。鼠标事件也是如此,只有当用户似乎没有在此元素上使用触摸设备时才会执行鼠标事件。
虽然随后在元素上查找 touchend 事件似乎是合乎逻辑的,但似乎如果用户在其上进行长时间触摸(假设它是 anchor 元素),则在元素上触发 touchend 事件时,不会触发该事件。移开他们的手指/指点设备。然而,它仍然在窗口上触发,因此我们捕获该事件并删除悬停类。
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>
关于javascript - 如何在移动设备上手动触发mouseleave事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69369446/