Mapping Touchscreen Events to Mouse Events
-
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. :laugh:
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. :laugh:
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??". :laugh:
-
Leave me the hell alone, Richard. Nobody has time for your childish nonsense. Go be hateful to someone else.
Jeremy Falcon
Mate, this seems an odd response, as does the demand for "likes". Everything OK?
cheers Chris Maunder
-
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? :laugh:
Yes, it certainly can be. :thumbsup:
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.](https://jsfiddle.net/jfalcon/f5c0xz9s/28/) 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. :laugh: 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
-
Mate, this seems an odd response, as does the demand for "likes". Everything OK?
cheers Chris Maunder
The jest should've been obvious Chris. I provided an answer while saying I wasn't gonna answer. And the only reason Richard did what he did was from a carry over from something the other day. Oddly enough, it seems Steve (the person it was directed towards) was the only one that got it.
Jeremy Falcon
-
The jest should've been obvious Chris. I provided an answer while saying I wasn't gonna answer. And the only reason Richard did what he did was from a carry over from something the other day. Oddly enough, it seems Steve (the person it was directed towards) was the only one that got it.
Jeremy Falcon
That wooshing sound is the sound of this all going over my head. I'm going to grab another beer and see if that helps ;)
cheers Chris Maunder
-
That wooshing sound is the sound of this all going over my head. I'm going to grab another beer and see if that helps ;)
cheers Chris Maunder
:laugh: Cheers buddy. :beer:
Jeremy Falcon
-
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.](https://jsfiddle.net/jfalcon/f5c0xz9s/28/) 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. :laugh: 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.
-
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
-
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
Yes, I will read up on them right now. I just finished writing all the comments in my event mapping script, and I'm glad to be done with all that. No more dev work for me today. Although I don't think it's possible to be so bored that you'd go through and read it all, I'll post a link to the script anyway. https://chromosphere.com/chromosphere/scripts/js/ui/events/ui_touch_functions_d_f.js[^]
-
Yes, I will read up on them right now. I just finished writing all the comments in my event mapping script, and I'm glad to be done with all that. No more dev work for me today. Although I don't think it's possible to be so bored that you'd go through and read it all, I'll post a link to the script anyway. https://chromosphere.com/chromosphere/scripts/js/ui/events/ui_touch_functions_d_f.js[^]
You're right, I'd have to be really bored. :laugh:
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.
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](https://jsfiddle.net/jfalcon/f5c0xz9s/38/). 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. :laugh:
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. :laugh:
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<
-
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](https://jsfiddle.net/jfalcon/f5c0xz9s/38/). 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. :laugh:
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. :laugh:
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. :thumbsup:
Good luck, buddy.
Jeremy Falcon