Handling .click() in the Safari browser

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • DizelArs
    New Member
    • Jun 2023
    • 1

    Handling .click() in the Safari browser

    Hi all)

    Faced with a problem, element.click() event doesn't work in Safari browser.
    Tried various tricks like emulating touch event through a function:

    Code:
    let clickEvent = new Event('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });
    Replace play.click(); with play.dispatchEv ent(clickEvent) ;

    Added a style to all clickable elements:

    Code:
    cursor: pointer;
    I put a check to add the event depending on the platform:

    Code:
    const whatDevice2 = /iPad|iPhone|iPod/.test(navigator.userAgent);
    let whatEventUse2 = whatDevice2 ? 'touchstart' : 'click';
    I need after clicking on the button, to click on the element in the layout.
    This works on all platforms and browsers except Safari\IOS.

    Here is all the code:

    Code:
    const whatDevice2 = /iPad|iPhone|iPod/.test(navigator.userAgent);
    let whatEventUse2 = whatDevice2 ? 'touchstart' : 'click';
    
    let play = document.querySelector('#app-2 .cp-play-icon.cp-play-icon-paused');
    let originalId = audioPlay2[index].dataset.originalId;
    let elementToClick = document.querySelector(#${originalId});
    let audioButton = popupElement2.querySelector('a.popup__description_audio');
            
    audioButton.addEventListener(whatEventUse2, () => {
      if (elementToClick.classList.contains('cp-playlist-link_current')) {
        play.click();
        setTimeout(addIdLi2, 0);
      } else {
        elementToClick.click();
        { setTimeout(addIdLi2, 0);
       }
     });
    Apparently there is some subtlety that I don't see, and the ways I found on the internet didn't help.
    If anyone has any knowledge in this matter, please give me advice on what to do or point me in the right direction).
    I would be glad to have any information, thank you!
Working...