1

I have an application that is just not firing input and touch or click listeners on iOS. I've looked at these questions (just an fyi though...I'm not using jQuery):

jQuery click events not working in iOS

jQuery on click not working on iPhone (touch devices)

How do I use jQuery for click event in iPhone web application

And so many more..and what I've learned is the following:

  1. Add cursor pointer to the elements. Done. All of my clickable elements that aren't firing have the CSS attribute of cursor: pointer on them
  2. Inline the click listener. Tried that, to no effect
  3. Kind of along the same lines...add onclick="" to the element. Same as above, tried that, to no effect
  4. Use touch listeners. Tried that, to no effect. This is my current implementation that I'm about to show.

I know there is nothing, like, covering the element because I've added the pseudo class of :active to the elements just to make sure that was working, and when I made the clickable elements active, they did what the CSS told them. Here is how I'm adding the event listeners:

const interactionEvent = function () {
    const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
    return iOS ? 'touchstart' : 'click';
};
class SingleLeadInteraction {
    constructor() {
        const urlSearch = new URLSearchParams(window.location.search);
        this.leadId = urlSearch.get("id");
        this.addListeners();
    }
    addListeners() {
        this.addNoteButton.addEventListener(interactionEvent(), e => { SingleLeadInteraction.addNoteModal.showModal(); }, false);
        this.addAttachmentButton.addEventListener(interactionEvent(), e => { SingleLeadInteraction.addAttachmentModal.showModal(); }, false);
        this.changeAgentButton.addEventListener(interactionEvent(), () => { SingleLeadInteraction.changeAgentModal.showModal(); }, false);
        const leadDetailInputs = document.querySelectorAll(".field-container label input[data-api-name], .field-container label select[data-api-name]");
        leadDetailInputs.forEach(input => {
            input.addEventListener("input", e => {
                // code that isn't firing
            }, false);
        });
    }
}
SingleLeadInteraction.changeAgentModal = new Modal("#changeAgentModal");
SingleLeadInteraction.addNoteModal = new Modal("#addNoteModal");
SingleLeadInteraction.addAttachmentModal = new Modal("#addAttachmentModal");
let lead;
if (new URL(window.location.href).pathname === "/contact/") {
    lead = new SingleLeadInteraction();
}

I first started with just using "click" or "touchstart" where the interactionEvent() calls are, so I've tried that.

I just don't know what to do.

Why are my iOS event listeners not firing?

Adam McGurk
  • 186
  • 1
  • 19
  • 54

1 Answers1

0

Adding cursor: pointer; to a non-clickable element’s CSS allows clicks to bubble fully. 

cursor: pointer;

Thanks to link description here

https://gravitydept.com/blog/js-click-event-bubbling-on-ios

Devika B
  • 49
  • 3
  • From Review: Hi, while links are great way of sharing knowledge, they won't really answer the question if they get broken in the future. Add to your answer the essential content of the link which answers the question. In case the content is too complex or too big to fit here, describe the general idea of the proposed solution. Remember to always keep a link reference to the original solution's website. See: [How do I write a good answer?](https://stackoverflow.com/help/how-to-answer) – sɐunıɔןɐqɐp Oct 15 '19 at 07:20