触屏touchstart 与 click

2024-01-14 05:38
文章标签 click 触屏 touchstart

本文主要是介绍触屏touchstart 与 click,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


设计效果:当手指点击或触摸红框线menuList之外的部分时,弹框menuList消失。

问题:在优化触屏版的时候发现如图问题,当menuList弹出,手指触摸屏幕向下滑动时,menuList弹框不消失,只有手指点击menuList之外的部分才消失。


查看代码发现,源代码只定义了click事件:

$(doc.body).on('click',function(e) {if (e.target.id != 'menu') headerMenu.hide();});

说明触屏版对click和touch解析是不同的事件。

于是查了下touch的用法,发现是有touchstart,touchmove,touchend事件的,并且可以像click样直接使用。

于是更改代码:

$(doc.body).on('click touchmove',function(e) {if (e.target.id != 'menu') headerMenu.hide();});

OK,可以

更多demo和解析:http://www.aliued.cn/2013/04/27/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91%E4%B9%8Btouch-event%E7%AF%87.html


这篇关于触屏touchstart 与 click的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/604100

相关文章

Unity3D在2D游戏中获取触屏物体的方法

我们的需求是: 假如屏幕中一个棋盘,每个棋子是button构成的,我们希望手指或者鼠标在哪里,就显示那个位置的button信息。 网上有很多获取触屏物体信息的信息的方法如下面代码所示: Camera cam = Camera.main; // pre-defined...if (touch.phase == TouchPhase.Bagan)){ // 如果触控点状态为按下Ray

HMI触屏网关-了解VISON界面

原文详情见:https://www.iotrouter.com 概述 本章节主要介绍VISION界面的构成以及各个板块的功能,如果你已经对此有一定了解,可以跳过此章节。 VISION主要由3个视图组成:首页(启动视图)、实验室(测试视图)、编辑器(编辑视图)。点击左下角的功能按钮,可以切换不同的视图界面,如图所示: 首页 首页是启动视图,也是VISION主页面,用于显示设计好的组

Click库教程

Python Click 库教程 Click 是一个用于创建命令行界面的 Python 库。它使得编写用户友好的命令行工具变得简单和直观。Click 提供了强大的功能,包括参数解析、命令分组、选项处理等,同时保持代码的可读性和简洁性。 在这篇教程中,我们将介绍如何使用 Click 库来构建命令行工具,并逐步演示其核心功能。 1. 安装 Click 首先,需要安装 Click 库。可以使用

文本框输入完毕后,点击Enter触发按钮Click事件

文本框输入完毕后,点击Enter触发按钮Click事件 在C#编程中,我们经常碰到一个问题,就是在文本框中输入一些文字后,点击某按钮做一些响应处理。如百度搜索那样的,填写搜索内容,点击百度即可。当然我这里也有相应的情况: 输入文字后,点击按钮触发翻转文字效果。 如果想要用按下Enter代替点击按钮,可以这样写: private void textB

uniapp数组中数据位置的变更不会导致视图@click绑定的index

问题描述 有这么一个数组: twoCategoryList: [{id: 1,name: "家纺",orderNo: 10},{id: 2,name: "酒类",orderNo: 20} ], view代码: <view class="category-list"><view v-for="(twoCategory, twoIndex) in twoCategoryList" :ke

click mouseup move down 问题解决

var flag=null;  document.getElementById('huhu').οnmοusedοwn=function(e){  flag=true;   diffX=e.clientX-document.getElementById('huhu').offsetLeft;   document.οnmοusemοve=function(e){

opencv在android预览上实现灰化/感应触屏/边缘检测(3)

简介   在前一篇中,我们已经讲解了opencv在Android实现预览,现在继续在这预览上面实现些其他功能。 预览黑白化 步骤分析   首先需要知道我们使用的像素格式为:Bgra32。Bgra32:Bgra32像素格式是一种32BPP的sRGB格式。每个颜色通道(蓝色blue, 绿色green, 红色red)各占8BPP(位/像素),与Bgr24不同的是,它还有用于表现不透明度的

device tree在触屏中的实际应用

/*首先是在dtsi中定义一些和设备(触屏)相关的重要变量。定义这些个变量的目的就是在不同项目中,去读取与该项目对应的dtsi文件,对于触屏,提高了代码的兼容性,使内核代码更清晰明了。*//*首先看一下dtsi文件里写了什么。*//* ty-focaltech-ft6206.dtsi */&soc {i2c@78b9000 { /* BLSP1 QUP5 */focaltech@38 {};

【iOS-Cocos2d游戏开发之五】多触点与触屏事件详解(单一监听、事件分发)

李华明Himi  原创,转载务必在明显处注明: 转载自 【黑米GameDev街区】  原文链接:  http://www.himigame.com/iphone-cocos2d/450.html -----------------------------------本章补充开始!----------------------------------

linux 触屏, 旋转后配置pen

https://www.reddit.com/r/SurfaceLinux/comments/kgpb8g/howto_rotate_a_surface_device_display_and_have/ 主要获取笔的string,和旋转向量 #!/bin/sh# This script is for X sessions. I don't know how this would# work