Handling .click() in the Safari browser

[ars_logachev]

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:

let clickEvent = new Event('click', {
  bubbles: true,
  cancelable: true,
  view: window
});

Replace play.click(); with play.dispatchEvent(clickEvent);

Added a style to all clickable elements:

cursor: pointer;

I put a check to add the event depending on the platform:

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:

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!

[m_hutley]

@ars_logachev

Faced with a problem, element.click() event doesn’t work in Safari browser.

squints

hmm…

You sure your problem is click?

@ars_logachev

const whatDevice2 = /iPad|iPhone|iPod/.test(navigator.userAgent);
let whatEventUse2 = whatDevice2 ? 'touchstart' : 'click';

Seems to say you’d get touchstart rather than click…which event is your browser actually binding?

[ars_logachev]

Hi, thanks so much for taking the time to join the dialog))

Yes, I saw that .click() should work without any problem in Safari, but unfortunately it doesn’t work after clicking on the button item.

At first the addEventListener had the ‘click’ event, but I found on the internet that Safari can respond to the touchstart event better than the ‘click’ event.

For this I made a check and addEventListener gets the event depending on the platform it is on.

But, with either touchstart or click all events are handled well except these 2:

play.click();

elementToClick.click();

[m_hutley]

So just to be clear - are you testing this on a mobile device?

@ars_logachev

click all events are handled well except these 2:

Okay so your problem isnt in the event, but firing a trigger onto other elements.

What elements (specifically, what type of element) are selected by play and elementToClick? (what happens when you console.log them?)
What events are bound to those elements?

[ars_logachev]

This is what elements are output to the console from the play and elementToClick variables, respectively:

play clicks on the span element
elementToClick click on element li

console.log(play);

<span class="cp-play-icon cp-play-icon-paused">
    <div class="cp-play-icon-left" bis_skin_checked="1"></div>
    <div class="cp-play-icon-right" bis_skin_checked="1"></div>
    <div class="cp-play-icon-triangle-1" bis_skin_checked="1"></div>
    <div class="cp-play-icon-triangle-2" bis_skin_checked="1"></div>
</span>


console.log(elementToClick);

<li class="cp-playlist-link_current" id="moskva-siti__direction-vokzal" data-original-id="moskva-siti__direction-vokzal" data-span-text="Москва-сити">
    <div class="cp-playlist-poster" bis_skin_checked="1">
        <div class="cp-playlist-poster__image-container" bis_skin_checked="1">
            <img class="cp-playlist-poster__image" src="https://static.tildacdn.com/tild3162-3632-4666-a633-346364653636/uR_I4mXST-Kb_1.png">
        </div>
        <div class="cp-playlist-poster__play-container" bis_skin_checked="1">
            <svg class="cp-play-icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
                <path d="M64.279417 58.009844c0-21.327148 10.62092-39.540533 29.218194-50.118799a56.858178 56.858178 0 0 1 58.265769 0.255926l779.336659 453.969682c18.341348 10.706229 28.748996 28.748996 28.748996 49.905527 0 21.113877-10.407648 39.156645-28.748996 49.820219L151.76338 1015.854735a56.943486 56.943486 0 0 1-58.265769 0.255926 56.303672 56.303672 0 0 1-29.218194-50.161453V58.009844z"> </path>
            </svg>
        </div>
    </div>
    <span>Москва-сити </span><span class="cp-playlist-artist"> - 1</span>
</li>

[m_hutley]

javascript - Click event on span or div tag not working safari issue - Stack Overflow
?

[Thallius]

I never understood why you need to trigger a click event.

Take the code which is in the eventhandler of the element you want to click, extract it to a method and call it directly.

[PaulOB]

@ars_logachev

<span class="cp-play-icon cp-play-icon-paused">
    <div class="cp-play-icon-left" bis_skin_checked="1"></div>
 ...
</span>

[offtopic]
This is probably nothing to do with the issue but a span is not allowed to hold div content. A span is an inline element and can only hold other inline elements (even if you set its display to block). You need to use a div instead of a span. If you have not set the span to display:block (or some other display other than inline) you could find that you have no area to click as the divs overflow the span. However as mentioned it should be a div anyway for valid html.

As I said it’s probably nothing al all to do with the issue but won’t do any harm to fix
[/offtopic]