html button not firing on mobile, oh
-
File this one under Weird...or annoying. Background Created a little web app (including dotnet core Web Api) that allows me to read comics more easily. Because, I mean, why not. I wanted to be able to save the date of the last comic I read to a remote location so I can then load it from any browser (any of my multiple devices) and keep reading the comics consecutively by date. I got it all working and it's a fun little hobby app. The Problem I pulled the app up on my TV via Amazon FireStick (runs Amazon Silk browser). It all loaded up great. Then I attempted to press the button and nothing happened.
Load Dates
onclick Not Supported On Mobile This is considered a mobile browser and onclick is not supported. You need the
touchstartevent. First Attempt to Fix I looked it up and found documentation. I figured you could just add theontouchstart="functionName()"to the button. Nope! You have to attach the event to the element using javascript.document.querySelector("#loadComicDatesButton").addEventListener("touchstart",getComicDatesFromApi);
I guess that is because the <button> element doesn't know about ontouchstart or something?? :~ Other devs have probably figured this out and said this 1 million times before. But, it is still weird.
-
File this one under Weird...or annoying. Background Created a little web app (including dotnet core Web Api) that allows me to read comics more easily. Because, I mean, why not. I wanted to be able to save the date of the last comic I read to a remote location so I can then load it from any browser (any of my multiple devices) and keep reading the comics consecutively by date. I got it all working and it's a fun little hobby app. The Problem I pulled the app up on my TV via Amazon FireStick (runs Amazon Silk browser). It all loaded up great. Then I attempted to press the button and nothing happened.
Load Dates
onclick Not Supported On Mobile This is considered a mobile browser and onclick is not supported. You need the
touchstartevent. First Attempt to Fix I looked it up and found documentation. I figured you could just add theontouchstart="functionName()"to the button. Nope! You have to attach the event to the element using javascript.document.querySelector("#loadComicDatesButton").addEventListener("touchstart",getComicDatesFromApi);
I guess that is because the <button> element doesn't know about ontouchstart or something?? :~ Other devs have probably figured this out and said this 1 million times before. But, it is still weird.
I thought browsers were supposed to fire the mouse events as well as the touch events for single-finger activation gestures? Touch Events - Level 2[^] Even Amazon's own documentation say they do: Touch - Amazon Silk[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
"These people looked deep within my soul and assigned me a number based on the order in which I joined" - Homer
-
File this one under Weird...or annoying. Background Created a little web app (including dotnet core Web Api) that allows me to read comics more easily. Because, I mean, why not. I wanted to be able to save the date of the last comic I read to a remote location so I can then load it from any browser (any of my multiple devices) and keep reading the comics consecutively by date. I got it all working and it's a fun little hobby app. The Problem I pulled the app up on my TV via Amazon FireStick (runs Amazon Silk browser). It all loaded up great. Then I attempted to press the button and nothing happened.
Load Dates
onclick Not Supported On Mobile This is considered a mobile browser and onclick is not supported. You need the
touchstartevent. First Attempt to Fix I looked it up and found documentation. I figured you could just add theontouchstart="functionName()"to the button. Nope! You have to attach the event to the element using javascript.document.querySelector("#loadComicDatesButton").addEventListener("touchstart",getComicDatesFromApi);
I guess that is because the <button> element doesn't know about ontouchstart or something?? :~ Other devs have probably figured this out and said this 1 million times before. But, it is still weird.
The "inconsistency" of what events are supported in the HTML vs. events that can only be wired up with addEventListener is basically why I always use addEventListener. Besides the fact that I rather despise the whole "on[event]="someFunctionCall()" in the HTML. Makes it a PITA to figure out where to change the handler, and I also use a "UI event router" for these things so they can be handled by actual object instances, logged, etc. Yes yes, I know, you're doing a fun web app. ;)
Latest Articles:
Abusing Extension Methods, Null Continuation, and Null Coalescence Operators -
I thought browsers were supposed to fire the mouse events as well as the touch events for single-finger activation gestures? Touch Events - Level 2[^] Even Amazon's own documentation say they do: Touch - Amazon Silk[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Interesting. That's what I had expected too. But, until I added the explicit touchstart event I was getting nothing. I even tested it with a simple alert(). And, once I added it, it started working. So documentation may say something, but we all know the _real documentation_ is the code. :rolleyes: Thanks for finding those though because i couldn't find those docs. I will read them more closely. :thumbsup:
-
The "inconsistency" of what events are supported in the HTML vs. events that can only be wired up with addEventListener is basically why I always use addEventListener. Besides the fact that I rather despise the whole "on[event]="someFunctionCall()" in the HTML. Makes it a PITA to figure out where to change the handler, and I also use a "UI event router" for these things so they can be handled by actual object instances, logged, etc. Yes yes, I know, you're doing a fun web app. ;)
Latest Articles:
Abusing Extension Methods, Null Continuation, and Null Coalescence OperatorsMarc Clifton wrote:
basically why I always use addEventListener. Besides the fact that I rather despise the whole "on[event]="someFunctionCall()" in the HTML.
I like that you made those points. I will keep that in mind. Yours is a much better Separation of Concerns anyways. I believe the lesson I've just learned (new convention for me) is that it is better to wire up events in the JS itself due to your point and the point that mine didn't work very well. Thanks again.:thumbsup:
-
I thought browsers were supposed to fire the mouse events as well as the touch events for single-finger activation gestures? Touch Events - Level 2[^] Even Amazon's own documentation say they do: Touch - Amazon Silk[^]
"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer
Closing the loop on this... That second link explains that the onclick event should fire and it is correct. I created another barebones HTML page and added a button with an onclick event and tried it from my Amazon Kindle fire pad (running Silk browser) and it worked with no problem. Hmmm...maybe I had a syntax error on my original HTML and it pre-cluded the touch event from firing properly while a normal desktop browser handled it?? :~ Well, thanks again for your help. :thumbsup:
