|
 Cheers buddy. ![Beer | [beer]](https://www.codeproject.com/script/Forums/Images/beer.gif)
Jeremy Falcon
|
|
|
|
|
Jeremy Falcon wrote: I'm not answering crap until you start recognizing my replies with at least a like.
LOL. I'm sorry about that.
Jeremy Falcon wrote: You can manually call the user defined handlers
I tried adding touchstart, touchmove, and touchstart at the window level, the document level, body element level, web-window level, and it's too messy. Performance was poor. I have thousands of event handlers, both inline event listeners and added event listeners using the "element.addEventListener" method. Going through each one and adding their corresponding touch event handlers would create a trainwreck of a hackjob; a complete dumpster fire of code. Every idea I have tried, or considered trying doesn't work. Except for one.Jeremy Falcon wrote: 1) You don't have to do this.
It's actually done! I finished it almost an hour ago.
It was as difficult as I had thought. It took 3+ days and about 25 hours in total. 33% was studying, another 33% was experimenting, and I spent 33% of the time testing. It works better than I had ever imagined. 
I told you it was going to take a lot of code. Here it is as of now:
https://chromosphere.com/chromosphere/scripts/js/ui/events/ui_touch_functions_d_f.js[^]
|
|
|
|
|
Steve Raw wrote: I tried adding touchstart, touchmove, and touchstart at the window level, the document level, body element level, web-window level, and it's too messy.
By proxy I don't mean necessarily adding new events. But, for the events you do handle have them call another function that's the real handler. That way, more than one event can be used for the same handler. It's a lot less messy than trying to map event A to event B.
Steve Raw wrote: Performance was poor. I have thousands of event handlers, both inline event listeners and added event listeners using the "element.addEventListener" method. Going through each one and adding their corresponding touch event handlers would create a trainwreck of a hackjob; a complete dumpster fire of code. Every idea I have tried, or considered trying doesn't work.
Well, first things first... you need to remove those thousands of event handlers. Bubbling and capturing (trickling) are plenty enough to not need 90% of those I bet. Not sure if you read into bubbling and capturing, but here's a quick summary. In short, bubbling goes up and capturing goes down.
Check out the docs on addEventListener. There's a useCapture parameter. The default bubbles but you can change it to capturing mode via that parameter. Suffice it to say though, events will always propagate (unless canceled in the handler), and that's a good thing as you'll need less of them.
Assuming it's a top level event, bubbling is preferred. If it's a very specific element then capturing may be preferred. But, either way you go, the important thing to do remember is you don't need events on every element. As you discovered it's gonna bring your site to a crawl.
Steve Raw wrote: It's actually done! I finished it almost an hour ago.
Nice
Steve Raw wrote: It was as difficult as I had thought. It took 3+ days and about 25 hours in total. 33% was studying, another 33% was experimenting, and I spent 33% of the time testing. It works better than I had ever imagined.
Nice. Isn't web development fun?
Jeremy Falcon
|
|
|
|
|
Jeremy Falcon wrote: By proxy I don't mean necessarily adding new events. But, for the events you do handle have them call another function that's the real handler. That way, more than one event can be used for the same handler.
It's so difficult to have a discussion that is so technical. To clarify what you're saying here is that for all mouse-related event listeners, whether inline, or assigned by 'element.addEventListener', I include a function call to the event handler function that handles a touch event?
I have a few mouse-related event listeners assigned to the window element. I attempted to modify those window event listeners to include a corresponding touch event hander function call. I gave that a try several times in various ways. I quickly realized that using such an approach couldn't work. So, I tried using separate event listeners that handle touch events corresponding to the element's mouse event handler. In theory, that could work, but attempting to implement that would be a huge undertaking, it would be very difficult to maintain and modify. I realized that using such an approach would be like throwing rocks at a hornets nest.
I feel very confident using the approach I eventually decided upon after a lot of experimentation and testing. It adheres to standards, it's efficient and uses few resources, it's no more complex than it needs to be. The code is all located in a single location which makes it easy to modify and maintain. I think it's about as ideal as it can possibly be.
I'm planning on adding documentation and comments to the script today. It'll be much easier for others to understand what I'm doing once I have that completed. If you're interested, I can send you a link to view the documented code.
Jeremy Falcon wrote: Not sure if you read into bubbling and capturing, but here's a quick summary. In short, bubbling goes up and capturing goes down.
Yep, I sure did. I studied for hours and gained a wealth of knowledge and understanding far beyond what I had before.
Jeremy Falcon wrote: Assuming it's a top level event, bubbling is preferred. If it's a very specific element then capturing may be preferred.
Yes, I very much agree with that.
Jeremy Falcon wrote: Nice. Isn't web development fun?
Yes, it certainly can be.
|
|
|
|
|
Steve Raw wrote: It's so difficult to have a discussion that is so technical. To clarify what you're saying here is that for all mouse-related event listeners, whether inline, or assigned by 'element.addEventListener', I include a function call to the event handler function that handles a touch event?
Maybe some code will help. A fiddle...
Using events as a proxy.
Regardless of whether it's a touch event, click event, pointer event, etc. they can all call dude(). There's no need to add an extra layer of mapping to any of it. This has the benefit of allow the programmer to automate events without having to worry about going through the event cycle, but your real function is all that needs to be called. And it's waaaaay less mentally confusing.
Steve Raw wrote: I have a few mouse-related event listeners assigned to the window element. I attempted to modify those window event listeners to include a corresponding touch event hander function call. I gave that a try several times in various ways. I quickly realized that using such an approach couldn't work. So, I tried using separate event listeners that handle touch events corresponding to the element's mouse event handler. In theory, that could work, but attempting to implement that would be a huge undertaking, it would be very difficult to maintain and modify. I realized that using such an approach would be like throwing rocks at a hornets nest.
Guess it's my turn not to follow what's being said.
Just gonna assume we're talking about a click event on window... which should be discouraged. Unless that's like the only event you have and you plan on doing the mapping accordingly. But, if there's one on window plus 1,000 others then that's a different story.
But, the mapping touch basically between the same between mouse, touch, and pointer. The above fiddle also has a touch example. You can use Chrome Dev Tools to simulate the touch for testing it out.
Hope I'm on the right track with understanding the ask.
Jeremy Falcon
|
|
|
|
|
Jeremy Falcon wrote: Maybe some code will help. A fiddle...
Using events as a proxy.
That's interesting. I've never used the bind method, let alone inside an addEventListener method.
If I were to use that approach, then how would I set the event parameters if that bind method is located inside a click event listener? Let's say that I needed to run a passive event, such as mousemove within a click event listener. Click events are non-passive, yet mousemove events are passive. Passive events can't be canceled (without some effort, anyway), yet click events are cancelable. What if the click event is set to bubble, and the mousemove event needs to propagate as capture? I don't know how that could be done. Without being able to set those custom parameters for events, and event listeners, nothing would work. Perhaps if I added the parameters into the method as arguments, that might be possible. The solution I have now works great. It's as simple as it could possibly be. It's efficient, and every element in the DOM is automatically enabled for use with touch interaction. To make that possible, I only had to write a single subroutine. I'd say it only took a couple of minutes to write up and I'm all done. It seems to be an ideal solution in every way. If there's a better way to go about it, then I'm open to ideas.
|
|
|
|
|
Let me tackle this in the morning. I must retire for my beauty sleep.
I will say though, that bind, call, and apply are totally worth reading up on. Especially if you need a pass around a new this or in the case of that code example pass params where none were expected to be passed.
Jeremy Falcon
|
|
|
|
|
|
You're right, I'd have to be really bored. 
Jeremy Falcon
|
|
|
|
|
Steve Raw wrote: If I were to use that approach, then how would I set the event parameters if that bind method is located inside a click event listener? Let's say that I needed to run a passive event, such as mousemove within a click event listener
It's the same way. I should say though, you seem to be stuck on this idea of calling one event from another. That's not the way to go, regardless if it's passive or active.
Something like bind works on any function though, but that's not the important bit. I don't recommend doing this at all, but to answer the question (this time without bind just for illustration): Fiddle.
The key takeaway should be using the proxy approach.
Steve Raw wrote: What if the click event is set to bubble, and the mousemove event needs to propagate as capture?
They are two independent events. Bubbling or canceling one won't affect the other. You may need to take a step back at your code and the way you've done things, take a breather, and look at the big picture man. This is like crossing streams in Ghostbusters. Something is gonna blow up.
Steve Raw wrote: Without being able to set those custom parameters for events, and event listeners, nothing would work.
If it's a proxy, you can use any params you want for the real handler. The first fiddle showed that, with only passing the id as a single param.
Steve Raw wrote: It's efficient, and every element in the DOM is automatically enabled for use with touch interaction.
You mentioned 1,000 event listeners, trust me... there's room for improvement man. I promise.
Steve Raw wrote: and every element in the DOM is automatically enabled for use with touch interaction
That's just it, if every element has a listener attached to it, then not only will your site be slow but you've made it extremely difficult for your users to user the site... they can click the wrong thing. Just because you can do something, doesn't mean you should. I promise.
Steve Raw wrote: To make that possible, I only had to write a single subroutine.
If your 1,000 events are calling the same routine, that's using a proxy.
Jeremy Falcon
|
|
|
|
|
I haven't had the chance to read up on bind, call, and apply yet. I'll see if I can make use of them as you suggest. I've got a dentist's appointment. I've got 8 minutes to get there. I'll write more later.
|
|
|
|
|
Good luck, buddy.
Jeremy Falcon
|
|
|
|
|
Btw, if it makes you feel better, I just asked a very n00bish question (different site) for a different programming language I'm new at. So, we all go through this phase. It's a rite of passage.
Jeremy Falcon
|
|
|
|
|
Jeremy Falcon wrote: Btw, if it makes you feel better, I just asked a very n00bish question (different site) for a different programming language I'm new at. So, we all go through this phase. It's a rite of passage.
I'm pretty sure that I don't know what I'm doing. As long as I develop this stuff, I will always feel this way. It's an ongoing effort to learn and keep up with the fast pace of advancing technology. I'll soon start studying AI. I'm a complete n00b in that area. I remember the first time I saw the HTML markup used to place a hyperlinked image into an HTML page. I remember thinking to myself, "WTF is that??".
|
|
|
|
|
Btw, Richard's idea of using a pointer event is a good one. Just look past the stupid immature little whine fest he's got going on with me. He insulted me in another thread and is surprised I didn't stand for it. So, now he's just being childish. But, pointer events are useful.
Jeremy Falcon
|
|
|
|
|
You may find it easier to rewrite the code to use pointer events instead of mouse / touch events.
Pointer events ... are designed to create a single DOM event model to handle pointing input devices such as a mouse, pen/stylus or touch (such as one or more fingers).
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: You may find it easier to rewrite the code to use pointer events instead of mouse / touch events.
I checked out the link. It looks like it could be a viable option, but what took several hours for me to fix today was related to performance issues that would exist regardless of the events I used. It's not only a performance issue that's related to disallowing all passive events from being canceled by the browser, it's also the errors that are thrown when you attempt to cancel a passive event using the 'event.preventDefault' method. Viewing the console log was cringeworthy for a while there. I'm glad I can say that's all fixed now. 
|
|
|
|
|
how to connect my javascript vs code with my chrome using html file. I am unable to show my msg on chrome console window. olz guide me, whats wrong with my settings or code.
|
|
|
|
|
You have shown no code so we cannot possibly tell you what is wrong with it.
|
|
|
|
|
You have to install extension called Chrome DevTools, activate it, and than code as usual.
|
|
|
|
|
The dev tools are already built in to every major browser; there is no extension to install. Any extension that claims to be "Chrome dev tools" or similar is almost certainly malicious.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: Any extension that claims to be "Chrome dev tools" or similar is almost certainly malicious.
So, you want to say that I installed malicious extension? That may be true. But, how do I know this?
|
|
|
|
|
If you've installed an extension claiming to be "chrome dev tools", then you've almost certainly installed a malicious extension.
The dev tools are built-in:
Chrome DevTools | Chrome for Developers[^]
You'll need to go to the Chrome Web Store page for the extension you've installed, and check the publisher. If it's not "google.com", or the checkmark is missing, or the page isn't hosted on chromewebstore.google.com, then you've got a big problem.
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
Richard Deeming wrote: If you've installed an extension
I have installed this extension.
Based on your feedback, Ive already uninstalled it. Seems that no harm has been done.
|
|
|
|
|
Hi,
I am not the best at Javascript but have been using it more to avoid web forms postbacks at my users requests. The user also requested commas inserted in an numeric field (no decimal digits) as they type. I used toLocaleString(). The insertion of commas works fine until I get to the eighth digit. At that point the number shrinks in size and goes back to four digits, There is a valid comma in this but obviously I need to be able to put in more than 7 digitis.
Here is the seven digit state of the field:
1,234,567
And here is the field when I add the number 8 to the end of the above number:
1,234
The following code fired from on the onkeyup event handles this number:
var word = txtbox.value;
word = word.replace(“,”, “”);
let num = word;
formatted = parseInt(String(num)).toLocaleString();
txtbox.value = formatted;
I have also tried functions i found on web posts and regex values. Some cases didnt work at atll but many of the cases involving regex also seemed to break once the eighth digit is entered. Oddly all the examples I’ve seen on the web seem to involve no more than seven digits.
I tried adding “en-us” to the toLocaleString() as well as setting maxiumnsignificantdigits to 9. The result was the same.
8 seems to be a magic number and the solution is probably buried in some obscure documentation somewhere.
Any help would be appreciated.
Neil
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
