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
How to Detect State of CSS Transition via Js and Skip It
Jquery Scroll Show Hidden Content
Write Custom Text on Image Canvas with Fabric.Js and HTML5
How to Use Jquery to Detect If a File Input Has a File Selected
Get Current CSS Property Value During a Transition in JavaScript
Absolute Positioned Floating Header Jitters in Safari
Saving Dropdown Menu Selection in a Cookie
How to Get the Exact Rgba Value Set Through CSS via JavaScript
How to Get Default Font Size in Pixels by Using JavaScript or Jquery
Using Jquery How to Show and Hide Different Div's Onclick Event
Triggering CSS :Active Selector for Non-Anchor Elements
Opening an External Website in a Modal Popup
Need to Load Image as Modal on Click in Bootstrap CSS
Click Table Row and Get Value of All Cells
How to Add an Icon to the Options in React-Select
Handle Webpack CSS Imports When Testing with Mocha and Babel