CODEWITHSUNDEEP
javascriptjqueryioscsssafari
Janning Vygen
Janning Vygen

Reputation: 9192

Change CSS of link when clicked with Safari on ios

I have this Javascript on my site with Jquery:

$("a").on("click", aClicked);

function aClicked(e)
{
    $(this).addClass("clicked");
    // e.preventDefault();
    return true;
}

The css for class "clicked" changes the background color for this link.

It works fine on mobile devices with Android/Chrome browser. The color is changed, the link is followed.

It does not work with on iOS with Safari or WKWebView. It does work with UIWebView. My current device is iphone6+/ios9.3.

When I uncomment // e.preventDefault(); it does work, but the link is not followed of course. So to me it seems, that safari is too clever and does not render the page when it follows the link anyway?

I don't want solutions regarding tap-highlight-color or :active or :hover pseudo class for some reasons.

How can I fix it? Or did I miss something else?

Upvotes: 0

Views: 664

Answers (2)

Janning Vygen
Janning Vygen

Reputation: 9192

I changed it to "tap" instead of "click" together with Jquery mobile and it worked. 

$("a").on("tap", aClicked);

Upvotes: 1

Sabbin
Sabbin

Reputation: 2445

Try this work around... add a cursor pointer to the element $('a').css('cursor','pointer'); or try on focus instead of on click event

Upvotes: 0

Related Questions