触摸/点击和输入事件侦听器不触发 iOS

Question

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?

Answer 1

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