gpt4 book ai didi

适用于触摸屏用户(即 iPad)的 jQuery onMouseover/onClick

转载 作者:行者123 更新时间:2023-12-03 22:49:49 24 4
gpt4 key购买 nike

所以,我在一个基于网站的系统中制作了一个可折叠菜单,该系统将菜单最小化为屏幕右上角的 6 个“ gem 按钮”,每个按钮看起来相同并包含一个数字,即涉及菜单内项目的警报。

这些内容与我的问题并不真正相关,只是简单地解释了它们不是文本,因此没有清晰易读的标签来解释菜单项的用途。

因此,我放置了一个 onMouseover 工具提示,它显示一个隐藏的 div,解释每个菜单项的含义。

还有一个 onClick 事件,jQuery 将菜单滑入 View 。

这是一个私有(private)内联网系统,我不会在公共(public)网站上使用这些菜单,因为它不够清晰,但考虑到这是应用程序,我的问题是:

例如,当在 iPad(可能还有其他触摸屏设备)上查看时,onMouseover 会被处理为 onClick,因此,“单击”按钮只会显示工具提示,而不是所需的菜单。

处理这个问题有什么建议?

我看过这个帖子Detect iPad users using jQuery?因此,鉴于它是一个私有(private) Web 应用程序,我可以检测 iPad 用户并重新构建 jQuery 以忽略 iPad 用户的 onMouseover 命令,但如果我要将类似的应用程序扩展到可能拥有更多用户的应用程序,那么会发生什么?如何处理这两个事件?

最佳答案

if ("ontouchstart" in window || "ontouch" in window) {
// bind the relevant functions to the 'touch'-based events for iOS
}
else {
// use the classic mouse-events, 'mouseover,' 'click' and so on.
}

我已经使用以下简单的演示对此进行了测试,尽管在全屏 JS Fiddle demo 中还没有事件绑定(bind)(到目前为止) (我还制作了一个 TinyUrl 来重定向到该演示,以便轻松进入 iOS 设备:tinyurl.com/drtjstest2/)。

修改后的演示,具有事件分配函数:

var body = document.getElementsByTagName('body')[0];

if ("ontouchstart" in window) {
body.style.backgroundColor = 'red';
body.ontouchstart = function(){
this.style.backgroundColor = 'yellow';
};
body.ontouchend = function(){
this.style.backgroundColor = 'green';
};
}
else {
body.style.backgroundColor = 'green';
body.onmousedown = function(){
this.style.backgroundColor = 'yellow';
};
body.onmouseup = function(){
this.style.backgroundColor = 'red';
};
}

JS Fiddle demo (以及 TinyUrled 替代方案: tinyurl.com/drtjstest3/ )。

引用文献:

关于适用于触摸屏用户(即 iPad)的 jQuery onMouseover/onClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8430568/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com