$(Document).Click() Not Working Correctly on Iphone. Jquery

$(document).click() not working correctly on iPhone. jquery

Adding in the following code works.

The problem is iPhones dont raise click events. They raise "touch" events. Thanks very much apple. Why couldn't they just keep it standard like everyone else? Anyway thanks Nico for the tip.

Credit to: http://ross.posterous.com/2008/08/19/iphone-touch-events-in-javascript

$(document).ready(function () {
  init();
  $(document).click(function (e) {
    fire(e);
  });
});

function fire(e) { alert('hi'); }

function touchHandler(event)
{
    var touches = event.changedTouches,
        first = touches[0],
        type = "";

    switch(event.type)
    {
       case "touchstart": type = "mousedown"; break;
       case "touchmove":  type = "mousemove"; break;        
       case "touchend":   type = "mouseup"; break;
       default: return;
    }

    //initMouseEvent(type, canBubble, cancelable, view, clickCount, 
    //           screenX, screenY, clientX, clientY, ctrlKey, 
    //           altKey, shiftKey, metaKey, button, relatedTarget);

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                          first.screenX, first.screenY, 
                          first.clientX, first.clientY, false, 
                          false, false, false, 0/*left*/, null);

    first.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() 
{
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);    
}

jquery.click() not working in iOS

Try to add a pointer cursor to the button and use .on to bind the click event.

$('#button1').css('cursor','pointer');
$(document).on('click', '#button1',  function(event) {
    event.preventDefault();
    alert('button1');
});

jQuery click not working in iOS?

How apple handles events

By design you need to use a clickable element. So yes, everyone will experience this issue unless they take care of it with a solution similar to this. If it can't be expected to be clicked then it won't be seen that way by IOS.

An excerpt from apples developer page.

Making Elements Clickable

Because of the way Safari on iOS creates events to emulate a mouse,
some of your elements may not behave as expected on iOS. In
particular, some menus that only use mousemove handlers, as in Listing
6-1, need to be changed because iOS doesn’t recognize them as
clickable elements.

Listing 6-1 A menu using a mouseover handler

<span onmouseover = "..."
  onmouseout  = "..."
WHERE TO BUY
</span>

To fix this, add a dummy onclick handler, onclick = "void(0)", so that
Safari on iOS recognizes the span element as a clickable element, as
shown in Listing 6-2.

Listing 6-2 Adding an onclick handler

<span onmouseover = "..."
  onmouseout  = "..."
  onclick = "void(0)">
WHERE TO BUY
</span>

jQuery on click not working on iPhone (touch devices)

By default, divs are not a "clickable" elements. But adding cursor: pointer; makes iOS treat it as clickable.

So all you need to do is add

.close {
    cursor: pointer;
}

to your CSS and then it will work.

Proof here: https://jsfiddle.net/27ezjrqr/6/

$(document).on('click', '.close', function() {  alert('hello');});

.close {  cursor: pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="close">  Click here</div>

jquery .click() doesn't work on iphone

Try this:

$(document).on('touchstart click', '#info-icon', function () {
    $('#info-panel').show('slow');
});

$(document).on('touchstart click', '#info-close', function () {
    $("#info-panel").hide(1000);
});

$(document).on click handler and standard click handler behaving differently on iOS

I looked at the jquery source code, and they are the same (both .click and on('click') use the same function which is the .on.

.click

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup contextmenu" ).split( " " ),
    function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
} );

as you can see, $.click will eventually call .on (or .trigger if no arguments are present which is not your case)

---

Related Topics