jquery检测已被触摸的子菜单项的id
在 jQuery 中，要检测一个子菜单项是否已被触摸，可以使用事件委托来监听触摸事件，并通过事件对象的 target 属性来获取被触摸的元素。以下是一个示例代码，展示了如何实现这一功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Touch Detection</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<ul id="menu">
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3</li>
</ul>
<script>
$(document).ready(function() {
$('#menu').on('touchstart', function(event) {
var touchedItemId = event.target.id;
console.log('Touched item ID:', touchedItemId);
// 在这里可以添加更多的逻辑来处理被触摸的元素
});
});
</script>
</body>
</html>基础概念
- 事件委托：利用事件冒泡机制，将事件处理程序绑定到父元素上，而不是每个子元素上。
- 触摸事件：
touchstart是当手指触摸屏幕时触发的事件。
相关优势
- 性能优化：通过事件委托，减少了事件处理程序的数量，提高了性能。
- 动态元素支持：即使子菜单项是动态添加的，事件委托也能正常工作。
类型与应用场景
- 类型：触摸事件包括
touchstart,touchmove,touchend等。 - 应用场景：适用于移动设备和触摸屏设备上的交互设计，如菜单导航、滑动切换等。
可能遇到的问题及解决方法
- 事件冲突：如果页面上有多个触摸事件，可能会导致冲突。可以通过命名空间或条件判断来区分不同事件。
- 兼容性问题：某些旧版浏览器可能不支持触摸事件。可以使用
Modernizr库来检测浏览器支持情况，并提供降级方案。
示例代码解释
- HTML 结构：一个简单的无序列表
ul包含三个列表项li。 - jQuery 代码：在文档加载完成后，使用
on方法监听#menu元素的touchstart事件。当事件触发时，通过event.target.id获取被触摸元素的id，并在控制台输出。
通过这种方式，可以有效地检测和处理用户触摸子菜单项的操作。
相关·内容
我有下拉菜单，它在非触摸设备上运行良好，但例如，当在iPad上查看时，菜单不会因为所做的选择/触摸而消失。我可以在被触摸的菜单项上触发事件： $(document).on('touchstart', function() { }); 但我不确定如何识别哪个ID触发了该事件我试过了： var selectedID = $(this).attr("id&qu
浏览 15提问于2019-03-13得票数 0
回答已采纳
2回答
我正在使用一个基于CSS的菜单，其中我使用悬停效果来显示子菜单。我很想知道这个菜单在触摸屏设备上是如何工作的。我在IPad上测试了它，它似乎不起作用。<ul id="CSSMenu">
<li><a class="Home" href="/index.aspx" style="background: none repeat scroll
浏览 3提问于2013-09-23得票数 0
我们公司销售交互式LED面板，当使用触摸输入时，我们网站上的菜单将无法正确打开子菜单项。父链接当前只是子菜单项的占位符，这意味着在菜单上的第一个父菜单项上没有href，但这可能会改变，然后您将不得不在该链接上双击才能真正转到该链接。子菜单项当前仅在悬停时显示。我在其中一个答案上使用了代码的JQuery (“click touchstart")部分，但没有
浏览 4提问于2018-03-02得票数 0
我正在尝试实现一个基于ios webkit的应用程序的菜单，其中用户触摸/点击并按住菜单按钮('.menu_item')，500ms后子菜单打开(div.slide_up_sub_menu)，用户应该能够滑动他们的手指如果用户已经停止了对子菜单项的触摸，则应该会检测到它。目前检测哪个子菜单项发生了mouseup事件在桌面的Safari中是有效的：
$(
浏览 0提问于2011-10-08得票数 8
1回答
如何在页面加载时启动触摸屏
、、、、
我有一个菜单，它使用鼠标悬停在桌面上显示子菜单。对于触摸屏设备，菜单焦点似乎只有在另一个元素首先被触摸(聚焦)之后才会启动。当我触摸菜单项以显示子菜单时，菜单项显示为选中，但不显示子菜单。如果我通过触摸另一个页面元素(如图像或表单域)来转移焦点，然后再次触摸菜单项，则子菜单将按预期工作。如果我先关注表单元素，然后再关注子菜单，它也会起作用。我的CSS中有:hove
浏览 18提问于2020-03-24得票数 0
1回答
我目前在一个网页上有一个使用html5视频标签的视频。我需要检测用户在视频标签上的任何地方触摸。我正在使用jquery库，但它似乎有任何触摸检测，即使我在整个body标签上执行，它也不会注册已被触摸。);你有什么办法让这段视频对iphone上的触摸做出反应吗？
浏览 2提问于2013-06-23得票数 1
1回答
我有一个带孩子菜单的菜单。它基于示例。在桌面上，它工作得很好。我打开菜单，悬停在一个选项上，就会出现子菜单。然而，当我在我的iPhone上尝试它时，我无法访问子菜单。点击目标将打开主菜单，但单击菜单项将关闭主菜单。
我设想要解决这个问题，我必须将显示子菜单的目标事件从“悬停”更改为“单击”。对吗？如果是的话，有谁知道我如何使用Base菜单来做到这一点呢？(注:要查看该问题，请在您的手机上访问该URL。不要使用代码响应视图)。'bottomRi
浏览 7提问于2022-11-15得票数 0
4回答
我已经阅读了许多关于这个主题的主题，这是一个在移动设备上很友好的下拉菜单。很多时候，最好是在下拉菜单上有一个非悬停操作。有一些变通方法，其中一个是下拉项的主超链接应该链接到一个标签。这使得它可以在移动设备上工作，但对于普通的桌面用户来说，这将是令人困惑的。因此，解决方案是为桌面用户提供一个普通的下拉菜单，其中第一个超级链接也链接到一个页面。对于移动用户，点击一个项目将打开下拉菜单，但第二次点击主项目将打开相应的页面。我看过下面的网站，不知何故，他们的菜
浏览 2提问于2012-08-08得票数 14
回答已采纳
1回答
我使用嵌套列表作为带有子菜单项的菜单。我过去经常这样做，如果您在主菜单项上徘徊，子菜单项将通过将显示从“无”更改为“块”来显示。我决定让子菜单看起来像是在下拉，并使用CSS转换。我遇到的问题是，在第一种方法中，如果您触摸了iPad上的主菜单项，则子菜单将显示，然后您将再次触摸它以跟随链接。使用新的方法，它遵循iPad上的链接，您
浏览 1提问于2015-10-22得票数 4
我是Cocos2d的新手。我将创建一个示例游戏，其中包含菜单( CClayer )，其中每个菜单项将CClayer作为子项添加到菜单层。现在，我将settings层作为子级添加到Menu层。当我选择设置层时，在菜单层中检测到的触摸不在设置层中。如何在菜单层中禁用CCMenu。帮帮我,
浏览 0提问于2011-02-21得票数 2
回答已采纳
1回答
我有一个左侧垂直CSS菜单与子导航弹出到右边。下面是指向我的示例的链接(您可能需要调整窗口的高度)：
<!
浏览 2提问于2014-10-16得票数 0
回答已采纳
我的场景中有许多精灵，它们是大雪碧地图集的一部分，它们被添加到CCSpriteBatchNode中以提高性能。但是，为了制作CCMenu，需要使用其中的一些。
浏览 1提问于2013-12-14得票数 0
回答已采纳
我有一个非常标准的CSS下拉菜单，使用:悬停显示子元素，并使用双击插件捕获和清除触摸事件，允许在触摸设备上显示子菜单元素。
<ul id
浏览 1提问于2014-03-14得票数 0
我有一个基本的jquery脚本，它可以检测元素移除并计算其子元素的数量。但子元素计数不变，尽管该元素已被移除。这是我的HTML脚本 <p>Test 1</p> <p id="p3">Test 3</p><input type=
浏览 9提问于2017-01-03得票数 1
回答已采纳
1回答
移动触摸菜单
、、、
我想做一个菜单项：允许您单击子菜单中的链接，而子菜单是可见的。关闭子菜单(不单击链接)，如果您将鼠标移到子菜单外(使用鼠标)或触摸子菜单之外的任何位置(使用触摸屏)。当我使用Android平板电脑上的浏览器触摸它时，这似乎是正确的</
浏览 0提问于2014-07-06得票数 12
我有一个包含多个子视图的UIScrollView，每个子视图都显示一页PDF内容。滚动可以正常工作，现在我要做的是获取当前视图中页面被触摸时的位置。正在检测触摸事件，但location.x是负数。在调试过程中，我发现滚动视图正在检测子视图中的触摸，子视图本质上是添加的最后一个子视图，而不是当前视图中的子视图。
我需要做什么才能让
浏览 1提问于2010-08-24得票数 0
回答已采纳
1回答
为了演示这个问题，我使用Cocos2d模板用Xcode4.3编写了一个演示应用程序，只需修改HelloWorldLayer的init方法，这种现象仍然存在。
浏览 0提问于2012-11-05得票数 0
回答已采纳
1回答
我有一个Wordpress菜单，我正在使用它作为一个更小的移动设备的汉堡菜单。由于触摸设备确实没有“悬停”事件，所以我已经更改了主菜单项，以便在“单击”(或“触摸”)上显示相应的子菜单。问题是我无法使主菜单项可点击。另外，我在"wp_nav_menu“中没有看到显示子菜单上顶级项的选项。这就是我倾向于使用它的方式。我需要一个解决办法之类的。
浏览 0提问于2015-12-30得票数 -2
2回答
它使用jquery hoverIntent插件，在桌面浏览器上运行良好。但对于iPad/tablet，如果我触摸任何一个菜单项，它就会激活那个菜单项。它不会滑下来。如果我再次尝试触摸它，什么也不会发生。但是当我点击另一个菜单项时，它工作得很好。该菜单会正确地向下滑动，然后其他菜单项也会正常工作。(甚至是我触摸的第一个)。有人能帮我解决这个问题吗？
浏览 0提问于2014-03-18得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
云直播
对象存储
腾讯会议活动推荐
腾讯云开发者
