Thank god for you. A clear, concise crash course on touch events. I have been scouring the internet only to find documentations and outdated stackoverflows. This was exactly what I needed.
Hey Kyle great video as always! Btw I noticed one thing that the about Phone menu is actually leaking your phone number & imei at 4:19 Please add some blur or box to hide it. Thanks.
i was just working on something for mobile browser the other day and I've used on click everywhere! got to learn a lot from this.... can you please do tutorial for holding down plus minus button to gradually speed up number? Thanks
Kyle, have you considered pointer events? Would be simple to change your code to make pointer events work, but they would have the advantage of working for touch and mouse at the same time. There is no touch array with pointer event but you don't need that. As you could see the simultaneous touch is nearly impossible anyway. Pointer events are, I think, simpler to implement.
According to MDN, the pointer event seems to have better browser compatibility (for non experimental properties). Also, the pointer event has more capability to handle things such as pressure and tiltX for pen devices.
I was considering just click for my (soon to be available) explainer video on programming drag and drop. Then I considered adding touch based on this great video by Kyle - just been testing using pointer events - both in one event! Tested in mobile chrome and edge.
W wat a great guide W you not only gave great real world use case scenarios but you also show a fast and simple way to debug any and all examples. There has been times where I followed a guide and ran into a bug that wasn't explain in the demonstration and couldn't figure out how to properly debug it. Ppl would pay crazy amounts of money to get half of this effort and quality at a college. One more W for good measure. P.S. I don't even web dev but love it when I see a good and clear guide.
You can also do remote USB debugging in desktop Firefox and connect its DevTool to your Android Firefox instance. Both need to be the same version iirc. On desktop goto about:debugging to enable the feature.
Perfect this time more clear 👍 i like kyle videos cause its clear without extra information . But some times he is too fast on talking like eminem😂 . ✌️Thak you for share your information kyle🤗
Ur the best 💜 Can u pls teach us this 16:34 part with some examples? How to detect touchmove on swipe up/down/left/right ? For example, if I swipe up, then... (something happen) Need help to detect these moves 😅
You could detect the direction by storing the `pageY` and `pageX` properties of the `Touch`es into variables and then comparing them to the updated values on later events. If previous X is less than current X, the touch is moving to the right etc. I can't be arsed to try this out, so I'm not sure if this works as is, but here's what I'd start with: const logDirection () => { // scope these variables so we can use this on different targets let prevX, prevY return (event) => { const { pageX, pageY } = event.changedTouches[0] if (prevX < pageX) console.log('right') else if (prevX > pageX) console.log('left') if (prevY < pageY) console.log('down') else if (prevY > pageY) console.log('up') prevX = pageX prevY = pageY } } document.addEventListener('touchmove', logDirection())
can you make a video about paper ripple animation when there is not internet youtube have a retry button and when you long press on it the animation goes slow and stays there as long as you click there i am struggling to find this kind of animation that youtube has
What about Laptops and Pen / Graphics Tablets? and how do *PointerEvents* fit into the picture? Tablets are connected to PC-ish devices (Laptops) and many come with support for pinch and zoom => multi touch points. Aren't PointerEvents supposed to be the clicky-touchy "meta" event that cover both touch and click? As a (Wacom) pen tablet user that also uses the pen/stylus as a mouse replacement, I always run into issues on web pages that use *drag* events like maps (Google, Apple). Several panels in Firefox DevTools also do not respond properly when I try to resize them using the pen. It's only web stuff that has this issue. Desktop apps respond perfectly fine to the pen-as-mouse use case.
It's the worst when you're trying to have different handlers for click and touch... Then you remember touching also registers as a click... And yes, you can have both touch and click working on your computer, as long as you have a touch screen and your browser is aware of it.
It's not needed there, but when you have a line that starts with brackets or parentheses, you must use semicolons at the start or in the previous line because otherwise the interpreter will think that line is a continuation of the previous line
4:34 Knox 3.8: So you're using a Samsung, released on >= November 11, 2021. Fascinating how little it takes, to draw some kind of conclusions about something.
@@WebDevSimplified Good to know that at least Business APIs/Frameworks get updates. Thanks for the feedback, I wasn't aware that Samsung provides updates for this component. Also for older devices, that may no longer receive system updates.
Hello Kyle, Thanks for great content. I don;t know why I can't run site on my mobile device. I'm on the same internet connection, the same IP adress. Did you come across that kind of situation?
Thanks Kyle. I would use these tricks in my mobile apps developed with React Native(which is basically JScript😊) Maybe they documented already in Touchables.
Hey love your vids, i don't know if you can help me with something, i did catch the vertical movement and i increase and decrese a variable value and i did set each 10 + or - to do anotherVariable++ and anotherVariable-- and run a function func(anotherVariable) my problem is no matter what i try the function its only called 1 time if i console log instead of a function like cons..log(10+) cons..log(10-) it will print as it should but as soon as i change to a real render code it breaks on first call
Hi Kyle, I've found that a semicolon had been automatically added on the first place of a line. It seems like an auto formatting was working. I googled up for the reason for using a starting semicolon but I'm not clear what benefit would it be. Would you please let me know why you are using a starting semicolon, what benefit, or why it could be a good habit while coding?
I'm creating a modal which on swipe down it closes. The issue is that with e.preventDefault() I can't focus on the element inside the modal because it prevents the click. Is there a work around this please?
@Maria it's also common for script concatenators and bundlers to put a semicolon between the scripts just to make sure statements don't "bleed" into each other. it's also a good idea to put one in front of any IIFE.
The semicolon is only there because of the interpreter. He doesn't use them on the end of each line. So the interpreter would consider those brackets to be part of the previous statement and execute it like an array (that wouldn't exist). To prevent this, he has to use the semicolon (delimiter) before the brackets. The [] is the "spread element" (look it up and read more). It can be used to create arrays from iterable objects. This is an important distinction with Array.from(). Array.from() can create arrays from iterable objects but also array-like objects (things with a length property, but may not be iterable). Neither of which is really faster than the other, but the way he uses the spread element wasn't necessarily what it's designed for. It also doesn't help the readability of your code. Array.from() makes sense to anyone who reads your code and should probably be used for this circumstance more than the spread element for that reason alone. The slice method is the old version of Array.from(). Array.from() is more efficient and can create arrays from more complicated data structures, but if browser compatibility is your concern then the slice method is your go to. Hope that helps!
