current position:Home>How to use HTML for touch event in mobile terminal
How to use HTML for touch event in mobile terminal
2022-04-29 17:25:27【Billion cloud speed】
HTML In the mobile end touch How do events work
This article mainly introduces HTML In the mobile end touch Knowledge of how events are used , The content is detailed and easy to understand , The operation is simple and fast , It has certain reference value , I believe that after reading this article HTML In the mobile end touch How to use the event, the article will gain something , Let's have a look .
1.touchstart
Trigger when your finger touches the screen
dom.addEventListener('touchstart',function(e){});startX=e.touches[0].clientX;
The event returns e
Object contains properties unique to the mobile terminal :
tarchTouches: All current touches of the target element
changedTouches: All newly changed touches on the page
touches: All the touches on the page
2.touchmove
Trigger continuously when fingers slide on the screen
dom.addEventListener('touchmove',function(e){});
The event returns e
Object contains properties unique to the mobile terminal :
tarchTouches: All current touches of the target element
changedTouches: All newly changed touches on the page
touches: All the touches on the page
3.touchend
Trigger when the finger leaves the screen
dom.addEventListener('touchend',funciton(e){});// stay touchend in ,touches Can't get touch object ,// Because the touch is over ,changedTouches Get the touch object in //console.log(e);//endX=e.touches[0]; undefined endX=e.changedTouches[0].clientX;
The event returns e
Object contains properties unique to the mobile terminal :
changedTouches: All newly changed touches on the page
touchcancel: When the system stops tracking the touch, it will trigger .( Not often )
stay touchend At the time of the event ,event Notification record changeTouches
4. e.touches[0]
clientX: Touch the target in the X coordinate .
clientY: Touch the target in the Y coordinate .
pageX: Touch the target in the x coordinate .
pageY: Touch the target in the y coordinate .
screenX: Touch the target in the x coordinate .
screenY: Touch the target in the y coordinate .
About “HTML In the mobile end touch How do events work ” That's all for this article , Thank you for reading ! I'm sure you're right “HTML In the mobile end touch How do events work ” Knowledge has a certain understanding , If you want to learn more , Welcome to the Yisu cloud industry information channel .
copyright notice
author[Billion cloud speed],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2022/119/202204291539468011.html
The sidebar is recommended
- Function of host parameter in http
- Use nginx proxy node red under centos7 and realize password access
- Centos7 nginx reverse proxy TCP port
- In eclipse, an error is reported when referencing layuijs and CSS
- Front end online teacher Pink
- Learn to use PHP to insert elements at the specified position and key of the array
- Learn how to use HTML and CSS styles to overlay two pictures on another picture to achieve the effect of scanning QR code by wechat
- Learn how to use CSS to vertically center the content in Div
- Learn how to use CSS to circle numbers
- Learn to open and display PDF files in HTML web pages
guess what you like
The PHP array random sorting function shuffle() randomly scrambles the order of array elements
JQuery implements the keyboard enter search function
16 ArcGIS API for JavaScript 4.18 a new development method based on ES modules @ ArcGIS / core
17 ArcGIS API for JavaScript 4.18 draw points, lines and faces with the mouse
18 ArcGIS API for JavaScript 4.18 obtain the length and area after drawing line segments and surface features
Vue environment construction -- scaffold
Build a demo with Vue scaffold
Using vuex in Vue projects
Use Vue router in Vue project
26 [react basics-5] react hook
Random recommended
- 07 Chrome browser captures hover element style
- WebGIS development training (ArcGIS API for JavaScript)
- Solution to the blank page of the project created by create react app after packaging
- 19. Html2canvas implements ArcGIS API for JavaScript 4 X screenshot function
- Introduction to JavaScript API for ArcGIS 13
- Development of ArcGIS API for JavaScript under mainstream front-end framework
- Nginx learning notes
- Less learning notes tutorial
- Vue2 cannot get the value in props in the data of the child component, or it is always the default value (the value of the parent component comes from asynchrony)
- LeetCode 217. Determine whether there are duplicate elements in the array
- I'll write a website collection station myself. Do you think it's ok? [HTML + CSS + JS] Tan Zi
- Front end browser debugging tips
- Application of anti chattering and throttling in JavaScript
- How to create JavaScript custom events
- Several ways of hiding elements in CSS
- node. Js-3 step out the use of a server and express package
- CSS matrix function
- Fastapi series - synchronous and asynchronous mutual conversion processing practice
- How to extend the functionality of Axios without interceptors
- Read pseudo classes and pseudo elements
- About node JS server related concepts
- Access control module (2)
- About virtual lists
- Developing figma plug-in using Vue 3 + vite
- Learn more about the garbage collection engine of chrome V8 JavaScript engine
- Vue3 uses vite instead of webpack
- How to upload applet code through node? Just take a look
- Using H5 video tag in Vue to play local video in pop-up window
- What is the difference between classes in Es5 and ES6?
- [Vue] play with the slot
- [Part 4 of front-end deployment] using docker to build cache and multi-stage construction to optimize single page applications
- Vue2 simple use of vant (based on Vue CLI)
- node. JS server
- React uses concurrent mode. When the rendering phase exceeds the time slice, high priority tasks jump the queue. How will the lanes on the fiber of the previous task be solved
- Vuecli2 multi page, how to remove HTML suffix
- Vue router dynamically modifies routing parameters
- How to use webpack or configure quasar after context isolation is turned on by electron?
- Vue3 how do parent components call child component methods
- Es learning notes (I): http request
- 【Java WEB】AJAX