移动web开发技能之touch事件详解

概述

单击事件是任何一个前端页面中最常用的交互行为之一，在传统的PC端大部分是使用click事件来实现用户单击交互的程序逻辑，而在移动Web端新增了touch事件来实现移动端更加敏感和复杂的触摸交互行为。本章将就移动端touch事件的使用以及它与PC端的click事件的区别进行深入探讨。

touch事件

在传统的PC端，用户的单击操作主要是由鼠标的左键或者右键来产生，它主要是指鼠标的按钮被按下，并且在很短的时间内（一般小于300ms）又被释放开，这就被称为单击操作（或称为一次点击操作）。

而对于移动Web端，同样也是如此，当手指触摸到屏幕时开始计算时间，并且在300ms内离开屏幕，这段时间手指不能移动，这就算是移动Web端的单击事件，手指触摸就被称为touch。

touch事件分类

移动Web端的touch触摸事件主要由屏幕和触摸点组成，其中屏幕可以是手机、平板或者触摸板，而触摸点可以通过手指、胳膊肘或触摸笔，甚至耳朵、鼻子都行，但一般是通过手指。根据touch触摸的类型可分为以下4种事件：

touchstart：当手指与屏幕接触时触发。
touchmove：当手指在屏幕上滑动时连续地触发。
touchend：当手指从屏幕上离开时触发。
touchcancel：当touch事件被迫终止，例如电话接入或者弹出信息时会触发，或者当触摸点太多，超过了支持的上限（自动取消早先的触摸点）时触发，一般不常用。

相比PC端，以上4种事件将用户的touch行为划分得更细，并且通过这些细化的事件可以实现移动Web端独有的用户交互行为，例如拖动swipe、长按longtap、双指缩放pinch，等等。

其中的touchstart、touchmove和touchend是最常用的3个事件，其中touchstart最先触发，touchend结束时触发，而touchmove是否触发取决于手指是否在触摸屏上移动。下面用代码来感受一下这3种事件的触发顺序，如下




  
  
  touch事件

在浏览器中运行这段代码，同时注意要启用Chrome中DevTools工具中的Device Mode功能，并使用鼠标模拟手指在屏幕上触发触摸事件，随后就会在Console控制台看到打印出对应的日志，从中可以看到一个简单的触摸操作是如何完成的。

touch事件对象

对于touch事件，每一次触发都可以得到一个事件对象，在JavaScript中这个对象叫作TouchEvent，利用TouchEvent可以获取touch事件触发时的坐标、元素以及到底有几个手指触发等，下面就来了解一下TouchEvent事件对象。

可以在Console控制台打印出当前触发touch时的TouchEvent对象，代码如下所示：

document.addEventListener("touchstart",function (e) {
    console.log(e);
});

打印的内容如图:

在上面的TouchEvent的属性中，经常使用的就是touches、targetTouches和changedTouches，它们的含义分别是：

touches：当前页面（屏幕）上所有的触摸点。
targetTouches：当前绑定事件的元素上的触摸点。
changedTouches：当前屏幕上刚刚接触的手指或者离开的手指的触摸点。

这3个属性返回的是TouchList对象，代表的是一个touch的集合数组，也就是说每一次touch触发，都会兼顾到多指触摸的场景，下面就分别以单指触摸的场景和多指触摸的场景来讲解这3个属性的区别。

首先是单指触摸的场景，我们来模拟用户一个手指触摸，如图。

外层的线框代表页面，里面的一个

元素绑定了touch事件，1号手指触摸了该

元素，这时touches、targetTouches以及changedTouches里面的触摸点都是指1号手指这个触摸点，应该很好理解。对于多指触摸的场景，条件是手指触摸屏幕之后暂不离开，如图。

外层的线框代表页面，里面的一个

元素绑定了touch事件，首先1号手指第一个触摸了该

元素，然后2号手指第二个也触摸了该

元素，最后3号手指第三个触摸了div外面的区域，这时touches涵盖的触摸点的集合数组包括1号、2号、3号手指，而targetTouches涵盖的触摸点的集合数组包括1号和2号手指，而changedTouches涵盖的触摸点的集合数组包括2号和3号手指。

当手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，此值为最后一个离开屏幕的手指的接触点。这就是touches、targetTouches和changedTouches这3个属性对于单指触摸的场景和多指触摸的场景下的区别，总结如下：

单指触摸的场景：

touches：1号手指
targetTouches：1号手指
changedTouches：1号手指

多指触摸的场景：

touches：1，2，3号手指
targetTouches：1，2号手指
changedTouches：2，3号手指

对于单指触摸的场景来说，它们并无区别，主要区别在于多指触摸的场景，所以在使用时可以根据具体的程序逻辑来选择使用合适的属性。

对于涵盖触摸点的集合数组TouchList而言，里面每个元素都是一个touch对象，通过这个对象可以获取当前触摸的位置，如图。

其中，主要用到了offsetX/Y、pageX/Y和clientX/Y这3个属性，它们的区别和含义分别是：

offsetX/Y：触摸位置相当于事件源元素的位置坐标，以当前
元素盒子模型的内容区域的左上角为原点。
pageX/Y：触摸位置相当于整个页面内容区域的位置坐标，当页面过长时，包括滚动隐藏的部分内容，以页面完整内容区域的左上角为原点。
clientX/Y：触摸位置相当于浏览器视区（屏幕）区域的位置坐标，以相对于页面的可见部分内容区域的左上角为原点。

具体的位置和距离可以参考下图，外层表示页面的所有内容，中间框表示浏览器的视区，其中有一个

元素绑定了touch事件，黑点表示触摸点的位置。

移动web单击事件

在了解了touch事件之后，我们知道移动Web端的单击事件完全可以由touchstart、touchmove和touchend来组合实现，移动Web端同时也提供了原生的click事件，它和传统的PC端的click事件一样，在用户完成一次完整的手指单击屏幕之后触发。在移动Web端使用click绑定单击事件，代码如下：

document.addEventListener("click",function (e) {
    console.log(e);
});

一切看似都很顺利，在需要使用单击时就用click事件，在需要使用touch时（拖动，长按等）就使用touch对应的事件。但是，对于移动Web端而言，处于iOS系统或Android系统时，采用click实现单击事件却有着不同的表现。

iOS单击延迟

这要追溯至2007年初，苹果公司在发布首款iPhone前遇到了一个问题：当时的网站都是为大屏幕设备所设计的，于是提出了视区（Viewport）的概念，其中一项即是用户在浏览网页时，可以在页面的任何地方通过双击操作将页面放大（Double Tap to Zoom）。这个交互功能提升了用户浏览网页时的体验，于是Android和iOS的移动端浏览器纷纷支持了这个功能，但是对于双击这个操作而言，其实是包括了两次单击操作，当第一次单击完成后，系统需要有一段时间来监听是否有第二次单击，如果有则表明此次操作是一个双击操作，而这段时间间隔大概有300毫秒（ms）。

因此，哪怕是只想要单击这个事件，也都会经过双击放大这个判断逻辑，导致要等到300毫秒之后才能收到单击事件程序逻辑的反馈，这就是300毫秒的单击延迟问题。

对于Android系统的浏览器而言，可以通过给视区设置user-scalable=no来禁止用户进行缩放，随后就可以正常地使用原生的click事件而没有延迟；对于iOS系统而言，浏览器对user-scalable支持度存在Bug（漏洞），导致了无法通过简单的设置来达到正常使用原生click事件的目的。代码如下：

所以，在iOS移动端，如果想要实现真正的单击事件而没有300毫秒延迟问题，就不能采用原生的click事件，可以通过touch（touchstart、touchmove和touchend）事件来模拟一次单击操作。好在当前业界已有比较流行的方案，例如Zepto.js中的tap事件和FastClick.js库可用来解决这个问题，在这里主要介绍一下FastClick.js库。

FastClick.js是FT Labs团队结合touch事件专门为解决移动端浏览器的300毫秒单击延迟问题所开发的一个轻量级的库。正常情况下，在移动Web端，当用户单击屏幕时，会依次触发touchstart、touchmove（0 次或多次）、touchend、click（原生）这些事件。touchmove事件只有当手指在屏幕上移动时才会触发。Touchstart、touchmove或者touchend 事件的任意一个调用event.preventDefault()方法，都会直接阻止原生click事件的触发。

FastClick的实现原理是在检测到touchend事件触发时，把浏览器在300毫秒之后原生的click事件阻止掉，然后通过DOM自定义事件立即发出一个模拟的click事件，这样就消除了300毫秒的延迟，提供了一个快速响应的“单击”事件。如下代码演示了FastClick的使用。




  
  
  FastClick.js

需要注意的是，在不修改标签中的user-scalable属性的情况下，300毫秒单击延迟的问题只会出现在iOS系统的浏览器中，并且解决方案只需要针对iOS端，上文也提到了这个问题的产生是由于对user-scalable支持度存在Bug，之后苹果公司也意识到了这个问题的严重性，于是在iOS 9.3版本时，提供了一个基于新的内核WKWebView的浏览器，并将其应用在Safari浏览器上，由此解决了这个问题（存在300毫秒单击延迟问题的浏览器是UIWebView，这个内核已经不再维护了），并且后续使用iOS 9.3版本系统的浏览器在访问页面时，会默认使用WKWebView浏览器。

至此，移动Web端的300毫秒单击延迟问题得到了彻底的改善。

“单击穿透”问题

在移动Web端，有一个很常见的应用场景，单击一个按钮会出现一个蒙层，此蒙层是全屏遮盖，并且有最高层级，当单击蒙层时，蒙层消失。此场景和交互操作看似并没有什么问题，但是假如页面中有一个绑定了单击事件的

元素被蒙层遮盖，而单击蒙层关闭时的位置刚好和该

元素重合，那么蒙层关闭后会同时触发该

元素的单击事件，对于用户来说，这个操作并不是要单击该

元素，这就是所谓的“单击穿透”问题，如图。

出现“单击穿透”问题需要有个条件，即蒙层是通过绑定的touch事件来实现隐藏，而其遮盖的

元素绑定的是原生click事件，这样就形成了touch事件触发之后，蒙层隐藏了，300毫秒后当前这个触摸点的click事件又触发了，就形成“单击穿透”。

移动Web端的“单击穿透”问题出现的原因其实和300毫秒单击延迟问题脱不了关系，但是“单击穿透”出现的场景比较单一，并且也比较好解决。

解决“单击穿透”问题可以从问题出现的原因上来着手，主要有以下两种解决方案：

不要同时混用touch事件和click事件，要么给蒙层和
元素同时绑定touch事件，要么同时绑定click事件，在iOS 9.3版本之后，只用click事件即可，此方案体验最好。
延迟蒙层消失的时间，例如在touch事件触发后，在350毫秒后再让蒙层消失，这样后面的
元素就不会触发click事件了，此方案会导致蒙层消失的响应慢，体验差，并且有时会触发两次消失逻辑，故不推荐使用。

无论是300毫秒单击延迟问题，还是“单击穿透”问题，这些都是移动Web端特有的问题，也在一定程度上反映出移动Web端环境的复杂性，需要注意支持度和兼容性问题的地方很多，所以大家在进行移动Web端开发时，要有意识地去关注这些问题。

以上就是移动web开发技能之touch事件详解的详细内容，更多关于web移动touch事件的资料请关注脚本之家其它相关文章！

你可能感兴趣的:(移动web开发技能之touch事件详解)

jQuery 入门到精通 abments 前端 jquery 前端 javascript
jQuery入门到精通：详尽指南目录jQuery简介jQuery基础安装jQueryjQuery选择器DOM操作事件处理jQuery进阶动画效果AJAX插件项目实践简单的待办事项列表获取和显示API数据高级技巧性能优化调试技巧资源和总结1.jQuery简介jQuery是一个快速、小巧且功能丰富的JavaScript库，它使HTML文档的遍历和操作、事件处理、动画以及AJAX交互更简单。jQuery
正点原子imx6ull-mini-Linux驱动之Linux I2C 驱动实验（21） NEWEVA__zzera22 imx6ull linux驱动编写 2024年 linux
I2C是很常用的一个串行通信接口，用于连接各种外设、传感器等器件，在裸机篇已经对I.MX6U的I2C接口做了详细的讲解。本章我们来学习一下如何在Linux下开发I2C接口器件驱动，重点是学习Linux下的I2C驱动框架，按照指定的框架去编写I2C设备驱动。本章同样以I.MX6U-ALPHA开发板上的AP3216C这个三合一环境光传感器为例，通过AP3216C讲解一下如何编写Linux下的I2C设备
微服务架构下的 Node.js JZC_xiaozhong 架构微服务 node.js 科技
Node.js在微服务架构中的特点轻量级和高效性Node.js以其轻量级和高效的特点，非常适合构建微服务架构。它具有事件驱动和非阻塞I/O模型，能够在处理高并发请求时表现出色。这意味着Node.js可以同时处理大量的并发连接，而不会因为阻塞I/O操作而导致性能下降。例如，在处理网络请求时，Node.js可以在等待一个请求完成的同时，继续处理其他请求，从而提高系统的整体吞吐量。良好的扩展性微服务架构
Redis 任璐 redis 数据库缓存
1.Redis简介简单来说redis就是一个数据库，不过与传统数据库不同的是redis的数据是存在内存中的，所以存写速度非常快，因此redis被广泛应用于缓存方向。另外，redis也经常用来做分布式锁。redis提供了多种数据类型来支持不同的业务场景。除此之外，redis支持事务、持久化、LUA脚本、LRU驱动事件、多种集群方案。2.我们为什么要用redis/为什么要用缓存呢？主要从“高性能”和“
大模型最新面试题系列：训练篇之模型监控与调试人肉推土机大模型最新面试题集锦大全面试人工智能 pytorch AI编程语言模型
1.训练过程中需要监控哪些关键指标？如何设置报警阈值？关键指标损失函数值：包括训练损失和验证损失，反映模型在训练和验证数据上的拟合程度。准确率：分类任务中的预测正确样本占总样本的比例，评估模型的预测能力。召回率和F1值：在二分类或多分类任务中，用于更全面地评估模型性能，特别是在正负样本不均衡的情况下。学习率：监控学习率的变化，确保其处于合适的范围，避免学习率过大导致模型不稳定或过小导致训练收敛过慢
基于NLP的客户意见分析：从数据到洞察 Echo_Wish Python 算法 Python 笔记自然语言处理人工智能
友友们好！我的新专栏《Python进阶》正式启动啦！这是一个专为那些渴望提升Python技能的朋友们量身打造的专栏，无论你是已经有一定基础的开发者，还是希望深入挖掘Python潜力的爱好者，这里都将是你不可错过的宝藏。在这个专栏中，你将会找到：●深入解析：每一篇文章都将深入剖析Python的高级概念和应用，包括但不限于数据分析、机器学习、Web开发等。●实战案例：通过丰富的实战案例，带你一步步实现
使用 Node.js 部署高性能应用：从入门到进阶 Echo_Wish 运维探秘让你快速入坑运维 node.js
使用Node.js部署高性能应用：从入门到进阶大家好，我是你们的运维伙伴Echo_Wish。今天我们来探讨如何使用Node.js部署高性能应用。Node.js因其异步非阻塞I/O模型、高效的事件驱动架构以及强大的包管理器npm，成为了现代Web开发的重要工具。我们将从简单的应用入手，逐步深入，探索如何优化Node.js应用的性能。希望你能从中受益！一、Node.js应用的基本部署首先，我们需要一个
迎接AI挑战：Java程序员的技能进化与发展趋势!!! 小南AI学院人工智能 java 开发语言
1.AI时代,JAVA程序员编码方式的发展趋势在AI时代，JAVA程序员编码方式的发展趋势正在经历显著变化。以下是几个主要发展方向：AI辅助编码工具的普及：像GitHubCopilot、AmazonCodeWhisperer和JetBrainsAIAssistant等工具正在帮助Java开发者更快地编写代码，自动完成常见模式和解决方案。这些工具不仅提供代码补全，还能生成函数、类甚至完整的实现。声明
STM32标准库之编码器接口示例代码星仔极客示例代码 #STM32标准库示例代码 stm32 单片机嵌入式硬件
编码器接口测速Encoder.c#include"stm32f10x.h"//Deviceheader/***函数：编码器初始化*参数：无*返回值：无*/voidEncoder_Init(void){/*开启时钟*/RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM3,ENABLE);//开启TIM3的时钟RCC_APB2PeriphClockCmd(RCC_APB
LLMs之Llama-3：基于Colab平台(免费T4-GPU)利用LLaMA-Factory的GUI界面(底层采用unsloth优化框架【加速训练5~30倍+减少50%的内存占用】)对llama-3 一个处女座的程序猿 NLP/LLMs 成长书屋大语言模型 unsloth LLaMA-3 LoRA
LLMs之Llama-3：基于Colab平台(免费T4-GPU)利用LLaMA-Factory的GUI界面(底层采用unsloth优化框架【加速训练5~30倍+减少50%的内存占用】)对llama-3-8b-Instruct-bnb-4bit模型采用alpaca数据集【instruction-input-output】实现CLI方式/GUI傻瓜可视化方式，进配置微调→参数行LoRA指令微调→模型推
C# 设计模式之观察者模式鲤籽鲲 C#c#设计模式观察者模式
总目录前言在现实生活中，处处可见观察者模式，例如，微信中的订阅号，只要对订阅号进行关注的客户端，如果订阅号有什么更新，就会直接推送给订阅了的用户。这就是观察者模式的一种应用。1基础介绍观察者模式定义了对象之间的一种一对多的依赖关系，使得当一个对象状态发生改变时，它的所有依赖者都能够得到相应的通知并作出相应的反应。观察者模式也被称为发布-订阅模式。观察者模式定义了一种一对多的依赖关系，让多个观察者对
最硬核DNS详解运维开发那些事 linux linux
1、是什么DNS（域名系统）是互联网的一项服务，它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS协议基于UDP协议，使用端口号53。2、域名服务器类型域名服务器在DNS体系中扮演着不同的角色，根据其功能和位置可以分为几种类型。以下是主要的域名服务器类型：根域名服务器：根域名服务器是DNS层次结构的最高层，它们并不直接提供具体的域名解析结果，而是指引查询到正确的顶
智能录音工牌如何应用在员工培训效果评估上？ DuDuTalk 人工智能录音设备语音分析自然语言处理语音识别
在数字化转型加速的今天，企业对员工培训效果的重视程度日益增加。为了确保培训能够切实提升员工的工作能力和效率，许多公司开始探索新的技术和方法来优化这一过程。智能录音工牌作为新兴的技术解决方案之一，正逐渐成为评估员工培训效果的理想选择。本文将深入探讨智能录音工牌如何助力企业更精准地衡量培训成效，并推动员工技能持续进步。1、真实场景数据收集，构建全面评估体系智能录音工牌能够在员工与客户互动的过程中实时录
Linux开启命令审计功能记录用户的每一步操作自由鬼安全运维技术 IT应用探讨 linux 运维服务器
默认情况下，Linux不记录用户的每一步操作到系统级别的日志文件中。但是，Linux确实记录了一些与用户操作相关的信息，并且提供了多种方法来开启更详细的用户操作记录，以满足安全审计或故障排除的需求。一、Linux默认记录的信息：用户登录和退出信息：Linux会记录用户的登录(login)和退出(logout)事件。这些信息通常被记录在/var/log/wtmp和/var/log/btmp文件中。你
迷你世界api 系统事件 yonghumyicunzai 游戏游戏游戏开发
迷你世界api系统事件游戏活动管理只需添加需要监视的事件，而无需创建事件对象，如下所示：--GameEvent---ScriptSupportEvent:registerEvent([=[Game.Start]=],Game_StartGame)ScriptSupportEvent:registerEvent([=[Game.Run]=],Game_Update)ScriptSupportEven
字节跳动2024校招后端开发面试题大全（含解题思路） AI天才研究院 ChatGPT AI大模型企业级应用开发实战 DeepSeek R1 &大数据AI人工智能大模型大厂Offer收割机面试题简历程序员读书硅基计算碳基计算认知计算生物计算深度学习神经网络大数据 AIGC AGI LLM Java Python 架构设计 Agent 程序员实现财富自由
字节跳动2024校招后端开发面试题大全（含解题思路）关键词：字节跳动、校招、后端开发、面试题、解题思路摘要：本文将围绕字节跳动2024校招后端开发面试题进行深入分析，包括数据结构与算法、编程语言基础、后端技术栈、微服务架构、系统设计与优化等方面的面试题。通过详细解析这些面试题，帮助读者理解解题思路，提升后端开发面试技能。字节跳动2024校招后端开发面试背景字节跳动（ByteDance）是中国领先的
迷你世界脚本事件列表：Event 星空露珠笔记游戏数据结构 lua
事件列表：Event彼得兔更新时间:2024-07-2612:04:51直接添加要监听的事件即可，无需自行创建事件管理对象。具体例子如下：--游戏事件---ScriptSupportEvent:registerEvent([=[Game.Start]=],Game_StartGame)ScriptSupportEvent:registerEvent([=[Game.Run]=],Game_Upda
[数据结构] [C++ STL] vector使用详解高亚奇数据结构数据结构 c++开发语言
一、概述vector（向量）:是一种序列式容器，事实上和数组差不多，但它比数组更优越。一般来说数组不能动态拓展，因此在程序运行的时候不是浪费内存，就是造成越界。而vector正好弥补了这个缺陷，它的特征是相当于可分配拓展的数组（动态数组），它的随机访问快，在中间插入和删除慢，但在末端插入和删除快。二、定义及初始化使用之前必须加相应容器的头文件：#include//vector属于std命名域的，因
前端React篇之哪些方法会触发 React 重新渲染？重新渲染 render 会做些什么？ m0_74823705 前端 react.js javascript
目录哪些方法会触发React重新渲染？重新渲染render会做些什么？setState()案例需求总结forceUpdate()案例需求总结props改变案例需求总结context改变案例需求总结哪些方法会触发React重新渲染？重新渲染render会做些什么？在React中，以下方法会触发重新渲染：setState()：当调用组件的setState方法并传入新的状态值时，React会触发重新渲染
React基础之useState 青红光硫化黑 react.js javascript 前端
useState是一个ReactHook(函数)，它允许我们向组件添加一个状态变量，从而控制组件的渲染效果import{useState}from"react"//使用useState实现计数器按钮functionApp(){//count是状态变量setcount是修改变量的方法const[count,setCount]=useState(0)//点击事件回调consthandleClick=(
React 基础教程阿贾克斯的黎明前端 react.js 前端前端框架
目录React基础教程一、React简介二、安装和设置三、创建第一个React组件（一）函数式组件（二）类组件四、渲染组件五、组件的属性和状态（一）属性（Props）（二）状态（State）六、组件的生命周期方法七、事件处理八、总结React是一个用于构建用户界面的JavaScript库。它以高效、灵活和可维护性而受到广泛的欢迎。本教程将介绍React的基础知识，帮助你快速上手React开发。一、
RAG 检索增强生成：技术详解与应用展望君君学姐 RAG检索增强生成
RAG检索增强生成：技术详解与应用展望一、引言随着人工智能技术的飞速发展，自然语言处理（NLP）领域迎来了前所未有的变革。其中，检索增强生成（Retrieval-AugmentedGeneration，简称RAG）作为一种新兴的技术框架，正逐渐成为大模型应用中的热门选择。RAG通过结合信息检索（IR）和自然语言生成（NLG）的能力，旨在提升模型在回答问题、生成文本等任务中的准确性和可靠性。本文将深
大数据面试系列之——Hadoop 潜心_守道大数据面经面试大数据 Hadoop
Hadoop的三个核心：HDFS（分布式存储系统）MapReduce（分布式计算系统）YARN(分布式资源调度)1.Hadoop集群的几种搭建模式1.单机模式：直接解压安装，不存在分布式存储系统2.伪分布式：NameNode和DataNode安装于同一个节点，无法体现分布式处理的优势。3.完全分布式：一个主节点，多个从节点，存在如果主节点宕机，集群就无法使用的缺点。4.高可用模式：多个主节点，多个
# React源码解析之Reconciler运行循环与scheduler调度 Bug程序员枯港后端
React源码之看完吊打面试官系列经历一个月的学习整理，站在前人的肩膀上，对React有了一些浅薄的理解，希望记录自己的学习过程的同时也可以给大家带来一点小帮助。如果此系列文章对您有些帮助，还望在座各位义夫义母不吝点赞关注支持，也希望各位大佬拍砖探讨本系列行文思路如下,本篇属于React中的React的管理员(reconciler与scheduler)[X]React启动过程[X]React的两大
QT-绘画事件 Ryan_Gosling qt 开发语言
实现颜色的随时调整，追加橡皮擦功能widget.h#ifndefWIDGET_H#defineWIDGET_H#include#include#include#include#include#include#include//自定义Line类，存储线段的起点、终点、颜色和宽度classLine{public:Line(constQPoint&start,constQPoint&end,constQ
数据结构拓展：详解realloc(C++) 神里流~霜灭数据结构 c++c语言数据结构顺序表链表线性表
前言在C++中，realloc是C标准库提供的一个内存管理函数，用于动态调整已分配内存块的大小。尽管C++更推荐使用new/delete或智能指针，但在某些场景（如与C代码交互或底层内存操作）中仍可能用到realloc。以下是详细分析：一、realloc的核心行为void*realloc(void*ptr,size_tnew_size);功能：调整ptr指向的内存块大小（原内存块由malloc/c
Vue2中使用全局事件总线 Aricanv vue.js javascript 前端
个人理解通过一个参数去实现任意组件间通信的一个方法这个参数需要被所有VueComponents看见仅仅可以在Vue2中使用,因Vue3中已经废弃了prototype第一步：实现全局事件总线在main.js中//创建vm的实例对象newVue({//将App组件放入容器中render:h=>h(App),beforeCreate(){Vue.prototype.$bus=this//安装全局总线},
全局事件总线（GlobalEventBus）一只小林前端 javascript vue.js 前端
全局事件总线（GlobalEventBus）使用步骤：1.main.js定义“全局事件总线”2.在A组件想接收数据3.在B组件想发送数据1.main.js定义“全局事件总线”//创建vmnewVue({el:'#app',render:h=>h(App),beforeCreate(){Vue.prototype.$bus=this}})2.在A组件想接收数据，定义this.$bus.$on和th
QT事件----QPaintEvent绘图事件，QwheelEvent鼠标滚轮事件等；用事件自定义按键；QT事件过滤器。都教授_ QT项目篇 qt 开发语言
一、QT事件1.1QPaintEvent绘图事件QPaintEvent是Qt框架中一个重要的事件类，专门用于处理绘图事件。当Qt视图组件需要重绘自己的一部分时，就会产生QPaintEvent事件。这通常发生在以下几种情况：1.窗口第一次显示时：当窗口或控件第一次出现在屏幕上时，系统会生成一个QPaintEvent事件，通知窗口进行自身的绘制。2.窗口大小改变时：当用户改变窗口的大小时，窗口的内容通
网络安全中解码图片是什么 Hacker_Nightrain fpga开发 web安全网络
huffman解码是JPEG图片解码里面的关键步骤，也是最复杂的一步。在fsm模块中DHT状态下读取的不仅仅是huffman表，还有另外两个表，一个是存放1-16不同码长的最小编码的一个表，另一个是存放最小编码的地址的表。在huffman解码中需要用到这两个表，还有在本模块也集成了反量化模块。huffman解码的步骤：（1）：判断解码数据的类型选择与之对应的表。（2）：进行码长的判断。（3）：计算
Nginx负载均衡 510888780 nginx 应用服务器
Nginx负载均衡一些基础知识: nginx 的 upstream目前支持 4 种方式的分配 1)、轮询（默认）每个请求按时间顺序逐一分配到不同的后端服务器，如果后端服务器down掉，能自动剔除。 2)、weight 指定轮询几率，weight和访问比率成正比
RedHat 6.4 安装 rabbitmq bylijinnan erlang rabbitmq redhat
在 linux 下安装软件就是折腾，首先是测试机不能上外网要找运维开通，开通后发现测试机的 yum 不能使用于是又要配置 yum 源，最后安装 rabbitmq 时也尝试了两种方法最后才安装成功机器版本： [root@redhat1 rabbitmq]# lsb_release LSB Version: :base-4.0-amd64:base-4.0-noarch:core
FilenameUtils工具类 eksliang FilenameUtils common-io
转载请出自出处：http://eksliang.iteye.com/blog/2217081 一、概述这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。非常的好用。
xml文件解析SAX 不懂事的小屁孩 xml
xml文件解析:xml文件解析有四种方式， 1.DOM生成和解析XML文档(SAX是基于事件流的解析) 2.SAX生成和解析XML文档(基于XML文档树结构的解析) 3.DOM4J生成和解析XML文档 4.JDOM生成和解析XML 本文章用第一种方法进行解析，使用android常用的DefaultHandler import org.xml.sax.Attributes;
通过定时任务执行mysql的定期删除和新建分区，此处是按日分区酷的飞上天空 mysql
使用python脚本作为命令脚本，linux的定时任务来每天定时执行 #!/usr/bin/python # -*- coding: utf8 -*- import pymysql import datetime import calendar #要分区的表 table_name = 'my_table' #连接数据库的信息 host,user,passwd,db =
如何搭建数据湖架构？听听专家的意见蓝儿唯美架构
Edo Interactive在几年前遇到一个大问题：公司使用交易数据来帮助零售商和餐馆进行个性化促销，但其数据仓库没有足够时间去处理所有的信用卡和借记卡交易数据 “我们要花费27小时来处理每日的数据量，”Edo主管基础设施和信息系统的高级副总裁Tim Garnto说道：“所以在2013年，我们放弃了现有的基于PostgreSQL的关系型数据库系统，使用了Hadoop集群作为公司的数
spring学习——控制反转与依赖注入 a-john spring
控制反转（Inversion of Control，英文缩写为IoC）是一个重要的面向对象编程的法则来削减计算机程序的耦合问题，也是轻量级的Spring框架的核心。控制反转一般分为两种类型，依赖注入（Dependency Injection，简称DI）和依赖查找（Dependency Lookup）。依赖注入应用比较广泛。
用spool+unixshell生成文本文件的方法 aijuans xshell
例如我们把scott.dept表生成文本文件的语句写成dept.sql,内容如下: 　　set pages 50000; 　　set lines 200; 　　set trims on; 　　set heading off; 　　spool /oracle_backup/log/test/dept.lst; 　　select deptno||','||dname||','||loc
1、基础--名词解析(OOA/OOD/OOP) asia007 学习基础知识
OOA:Object-Oriented Analysis（面向对象分析方法）是在一个系统的开发过程中进行了系统业务调查以后，按照面向对象的思想来分析问题。OOA与结构化分析有较大的区别。OOA所强调的是在系统调查资料的基础上，针对OO方法所需要的素材进行的归类分析和整理，而不是对管理业务现状和方法的分析。　　OOA（面向对象的分析）模型由5个层次（主题层、对象类层、结构层、属性层和服务层）
浅谈java转成json编码格式技术百合不是茶 json编码 java转成json编码
json编码;是一个轻量级的数据存储和传输的语言在java中需要引入json相关的包,引包方式在工程的lib下就可以了 JSON与JAVA数据的转换（JSON 即 JavaScript Object Natation，它是一种轻量级的数据交换格式，非常适合于服务器与 JavaScript 之间的数据的交
web.xml之Spring配置(基于Spring+Struts+Ibatis) bijian1013 java web.xml SSI spring配置
指定Spring配置文件位置 <context-param> <param-name>contextConfigLocation</param-name> <param-value> /WEB-INF/spring-dao-bean.xml,/WEB-INF/spring-resources.xml, /WEB-INF/
Installing SonarQube（Fail to download libraries from server） sunjing Install Sonar
1. Download and unzip the SonarQube distribution 2. Starting the Web Server The default port is "9000" and the context path is "/". These values can be changed in &l
【MongoDB学习笔记十一】Mongo副本集基本的增删查 bit1129 mongodb
一、创建复本集假设mongod,mongo已经配置在系统路径变量上，启动三个命令行窗口，分别执行如下命令： mongod --port 27017 --dbpath data1 --replSet rs0 mongod --port 27018 --dbpath data2 --replSet rs0 mongod --port 27019 -
Anychart图表系列二之执行Flash和HTML5渲染白糖_ Flash
今天介绍Anychart的Flash和HTML5渲染功能 HTML5 Anychart从6.0第一个版本起，已经逐渐开始支持各种图的HTML5渲染效果了，也就是说即使你没有安装Flash插件，只要浏览器支持HTML5，也能看到Anychart的图形（不过这些是需要做一些配置的）。这里要提醒下大家，Anychart6.0版本对HTML5的支持还不算很成熟，目前还处于
Laravel版本更新异常4.2.8-> 4.2.9 Declaration of ... CompilerEngine ... should be compa bozch laravel
昨天在为了把laravel升级到最新的版本，突然之间就出现了如下错误： ErrorException thrown with message "Declaration of Illuminate\View\Engines\CompilerEngine::handleViewException() should be compatible with Illuminate\View\Eng
编程之美-NIM游戏分析-石头总数为奇数时如何保证先动手者必胜 bylijinnan 编程之美
import java.util.Arrays; import java.util.Random; public class Nim { /**编程之美 NIM游戏分析问题：有N块石头和两个玩家A和B，玩家A先将石头随机分成若干堆，然后按照BABA...的顺序不断轮流取石头，能将剩下的石头一次取光的玩家获胜，每次取石头时，每个玩家只能从若干堆石头中任选一堆，
lunce创建索引及简单查询 chengxuyuancsdn 查询创建索引 lunce
import java.io.File; import java.io.IOException; import org.apache.lucene.analysis.Analyzer; import org.apache.lucene.analysis.standard.StandardAnalyzer; import org.apache.lucene.document.Docume
[IT与投资]坚持独立自主的研究核心技术 comsci it
和别人合作开发某项产品....如果互相之间的技术水平不同,那么这种合作很难进行,一般都会成为强者控制弱者的方法和手段..... 所以弱者,在遇到技术难题的时候,最好不要一开始就去寻求强者的帮助,因为在我们这颗星球上,生物都有一种控制其
flashback transaction闪回事务查询 daizj oracle sql 闪回事务
闪回事务查询有别于闪回查询的特点有以下3个：（1）其正常工作不但需要利用撤销数据，还需要事先启用最小补充日志。（2）返回的结果不是以前的“旧”数据，而是能够将当前数据修改为以前的样子的撤销SQL（Undo SQL）语句。（3）集中地在名为flashback_transaction_query表上查询，而不是在各个表上通过“as of”或“vers
Java I/O之FilenameFilter类列举出指定路径下某个扩展名的文件游其是你 FilenameFilter
这是一个FilenameFilter类用法的例子，实现的列举出“c:\\folder“路径下所有以“.jpg”扩展名的文件。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
C语言学习五函数，函数的前置声明以及如何在软件开发中合理的设计函数来解决实际问题 dcj3sjt126com c
# include <stdio.h> int f(void) //括号中的void表示该函数不能接受数据，int表示返回的类型为int类型 { return 10; //向主调函数返回10 } void g(void) //函数名前面的void表示该函数没有返回值 { //return 10; //error 与第8行行首的void相矛盾 } in
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Pl dcj3sjt126com centos
今天在测试环境使用yum安装，遇到一个问题： Error: Cannot retrieve metalink for repository: epel. Please verify its path and try again 处理很简单，修改文件“/etc/yum.repos.d/epel.repo”，将baseurl的注释取消， mirrorlist注释掉。即可。 &n
单例模式 shuizhaosi888 单例模式
单例模式懒汉式 public class RunMain { /** * 私有构造 */ private RunMain() { } /** * 内部类，用于占位，只有 */ private static class SingletonRunMain { priv
Spring Security（09）——Filter 234390216 Spring Security
Filter 目录 1.1 Filter顺序 1.2 添加Filter到FilterChain 1.3 DelegatingFilterProxy 1.4 FilterChainProxy 1.5
公司项目NODEJS实践0.1 逐行分析JS源代码 mongodb nginx ubuntu nodejs
一、前言前端如何独立用nodeJs实现一个简单的注册、登录功能，是不是只用nodejs+sql就可以了？其实是可以实现，但离实际应用还有距离，那要怎么做才是实际可用的。网上有很多nod
java.lang.Math liuhaibo_ljf java Math lang
System.out.println(Math.PI); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1.2)); System.out.println(Math.abs(1)); System.out.println(Math.abs(111111111)); System.out.println(Mat
linux下时间同步 nonobaba ntp
今天在linux下做hbase集群的时候，发现hmaster启动成功了，但是用hbase命令进入shell的时候报了一个错误 PleaseHoldException: Master is initializing，查看了日志，大致意思是说master和slave时间不同步，没办法，只好找一种手动同步一下，后来发现一共部署了10来台机器，手动同步偏差又比较大，所以还是从网上找现成的解决方
ZooKeeper3.4.6的集群部署 roadrunners zookeeper 集群部署
ZooKeeper是Apache的一个开源项目，在分布式服务中应用比较广泛。它主要用来解决分布式应用中经常遇到的一些数据管理问题，如：统一命名服务、状态同步、集群管理、配置文件管理、同步锁、队列等。这里主要讲集群中ZooKeeper的部署。 1、准备工作我们准备3台机器做ZooKeeper集群，分别在3台机器上创建ZooKeeper需要的目录。数据存储目录
Java高效读取大文件 tomcat_oracle java
　　读取文件行的标准方式是在内存中读取，Guava 和Apache Commons IO都提供了如下所示快速读取文件行的方法：　　Files.readLines(new File(path), Charsets.UTF_8); 　　FileUtils.readLines(new File(path)); 　　这种方法带来的问题是文件的所有行都被存放在内存中，当文件足够大时很快就会导致
微信支付api返回的xml转换为Map的方法 xu3508620 xml map 微信api
举例如下： <xml> <return_code><![CDATA[SUCCESS]]></return_code> <return_msg><![CDATA[OK]]></return_msg> <appid><

按字母分类： A B C D E F G H I J K L M N O P Q R S T U V W X Y Z 其他