Click Event Doesnt Work in Safari Mobile for Some HTML Content

Mobile Safari sometimes does not trigger the click event

The click event resulting from a tap on iOS will bubble as expected under just certain conditions -- one of which you mentioned, the cursor style. Here is another:

The target element, or any of its ancestors up to but not including
the <body>, has an explicit event handler set for any of the mouse
events. This event handler may be an empty function.

http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

This is much better fix vector, and can be done without a browser check. You do have to add an extra div due to the "not including the <body>" part:

<body>
<div onclick="void(0);">
<!-- ... all your normal body content ... -->
</div>
</body>

Now every click event originating inside that div will bubble as expected in iOS (meaning you can catch them with $(document).on('click', '.class', etc...)).

Click Event Delayed on Safari Mobile

When a user clicks/touchs an element with the class "item", I make an API call via ajax. I ended up exploiting the success function in ajax to remove elements with the class "thing":

var success = function (response) {
$(".thing").remove();
}

The biggest issue here is elements with the class "thing" are not removed until the API call returns successfully. Certainly, I'd prefer to remove the elements as soon as I observe the click event, but I can't get it to work as expected on Safari mobile.

The solution is better than waiting to remove the elements until the user swipes a second time.

onclick not working on safari and on mobile

I fixed it and I'm honestly not sure why it wasn't working but after a long time debugging I found that a function that I had declared (not even called) for some reason caused all JavaScript to stop working. The function was an xmlHttpRequest and when I removed it everything worked fine. This might be a bug (it worked on chrome) but it was an async request so maybe. Hope this is useful to anyone with the same problem!

Window.click event does not fire on IOS safari - JavaScript only

When using touch based devices, the events issued to the browsers are different.
It also gives the developer accurate use cases, to design and develop around.

I would assume that since there is no mouse then there will be no click event.

Taken from MDN:
In order to provide quality support for touch-based user interfaces, touch events offer the ability to interpret finger (or stylus) activity on touch screens or trackpads.

Try using:
document.addEventListener('touchstart', () => console.log('touch called'));

You can always opt to using function () {} instead of () => {}

See full details: https://developer.mozilla.org/en/docs/Web/API/Touch_events

click event on option not working in safari

There are a few known workarounds:

  • add cursor:pointer to your <option>s
  • replace .click(function(){}) with .on('click touchstart', function(){})

Another option (and, IMHO, the correct one) is to use the oninput event on the parent <select>:

 $('select').on('input', function(){/* whatever */})

$('select').on('input', function(){  console.log($(this).val())})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><select>  <option value=""> Select something </option>  <option>1</option>  <option>2</option>  <option>3</option></select>

calling click event of input doesn't work in Safari

The issue is completely solved. The point is element of input[type=file] must not be display: none. Look at sample below:

function click(el) {
// Simulate click on the element.
var evt = document.createEvent('Event');
evt.initEvent('click', true, true);
el.dispatchEvent(evt);
}

document.querySelector('#selectFile').addEventListener('click', function(e) {
var fileInput = document.querySelector('#inputFile');
//click(fileInput); // Simulate the click with a custom event.
fileInput.click(); // Or, use the native click() of the file input.
}, false);
<input id="inputFile" type="file" name="file" style="visibility:hidden; width:0; height:0">
<button id="selectFile">Select</button>

.live(click) event not working on ios safari and even onclick='' isnt

Its not exactly clear what is not working.

If the problem is that CLICK handler is not called at all then you can try to use touch events like "touchstart" or "touchend" because on touch devices you don't have mouse pointer so you can't "click". I am using jquery.tappable.js and it works fine for me.

Hope this helps.



Related Topics



Leave a reply



Submit