移动设备上的悬停和点击事件

Posted

技术标签:

【中文标题】移动设备上的悬停和点击事件【英文标题】:Hover and click event on mobile devices 【发布时间】:2012-08-24 14:12:37 【问题描述】:

我正在为桌面和移动设备创建一个响应式网站。我有一个悬停和点击事件问题,我不确定如何为移动设备上的用户解决。

在网站上,我有一个包含在链接中的框 (div)。在桌面上,当用户将鼠标悬停在它上面时,一个带有文本内容的不同颜色的框会滑到第一个框上。当用户单击该框时,该链接会将他们带到指定页面。我正在为此使用 jQuery。

现在,在移动设备上,当用户点击框时,第二个框会向下滑动。但实际点击链接需要第二次点击。我为其创建此内容的公司要求,在移动设备上,当用户点击一个框时,第二个框将向下滑动,并在 2 秒延迟后自动将它们发送到指定页面。这样,用户只需点击一次。

我不确定如何完成这项工作。我考虑过使用 jQuery mobile,但我无法找到绕过第一次点击(移动设备将其视为悬停事件)并激活链接的方法。

谢谢

【问题讨论】:

哇,这听起来真烦人。当然,客户想要客户想要的,但自动重定向(恕我直言)有点糟糕的设计。 【参考方案1】:

我同意@DZittersteyn 的观点,即这是一个糟糕的设计。您可以更好地在移动设备中默认显示内容,以便点击的人知道他点击了什么。

if(!!('ontouchstart' in window))//check for touch device
  $('myElement').unbind('click mouseenter mouseleave'); //use off if you used on, to unbind usual listeners
  $('myElement').on('click',function()
    //slide down code
    setTimeout(function()
       window.location.href='asdasd.html';
       ,2000);
    );

或者你可以使用

if(!!('ontouchstart' in window))//check for touch device
//behaviour and events for touch device

else
//behaviour and events for pointing device like mouse

【讨论】:

做什么!!意思是?那不就等于没有,或者根本就没有。 ***.com/questions/4686583/… 我同意 !!javascript 中的重要性,但 if() 不会自动将测试转换为 boolean 以处理虚假值吗?例如,let a = ; if(a['unknownKey']) console.log(true); \\ won't log else console.log(false); // will log console.log(!!a['unknownKey']);。想不出if() 无法正确转换为boolean!! 运算符可以正确转换的情况。【参考方案2】:
if (('ontouchstart' in window || (window.DocumentTouch && document instanceof DocumentTouch))) 
    $(".touch")
        .bind("touchstart", function() 
            $(this)
                .addClass("active")
                .bind("touchend", function() 
                    $(this).removeClass("active");
                );
        )
        .bind("touchenter", function() 
            $(this)
                .addClass("hover")
                .bind("touchleave", function() 
                    $(this).removeClass("hover active");
                );
        );

【讨论】:

【参考方案3】:

尝试使用 jQuery 监听移动设备的 touchstarttouchend 事件。

前:

$('selector').bind('touchstart', function()
  //some action
);
$('selector').bind('touchend', function()
  //set timeout and action
);

希望这会有所帮助。

【讨论】:

首先你必须解绑事件并绑定它

以上是关于移动设备上的悬停和点击事件的主要内容,如果未能解决你的问题,请参考以下文章

:跨移动设备的悬停行为

仍在应用移动设备悬停状态上元素上的onClick事件

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

如何在点击时禁用鼠标悬停事件?

移动web终端交互优化

Jquery移动按钮点击角落不起作用