CODEWITHSUNDEEP
javascriptjqueryiphoneiosipad
Diana
Diana

Reputation: 435

iPad Javascript/jQuery touchstart issue

I have a page on iPad and am facing some issues implementing an equivalent of mouseout behavior.

So I have:

  1. On my page, there is a checkbox on click (or rather touch), I want to show an errorMsg
  2. On click/touch on anything other than the errorMsg, I want to hide the errorMsg

Below is the code I have written;

$(document).bind("touchstart",function(e){
         if(e.target.id != "checkbox_err")
        $("span#checkbox_err").fadeOut("slow");
     });
}


$("input:checkbox").bind("touchstart",function(){
$("span#checkbox_err").fadeIn("fast");

});

Now the issue is when I click/touch on the checkbox, the errorMsg shows for a while and then it also hides it immediately (since target is not the errorMsg)

How do I fix this issue?

Upvotes: 2

Views: 9904

Answers (4)

srinivasarao549
srinivasarao549

Reputation: 11

Try this js fiddle code.It works in all major browsers and all touch devices at time..

http://jsfiddle.net/vecny/

Upvotes: 1

dangerousdave
dangerousdave

Reputation: 6418

Sounds like a ghost click, have a read here http://code.google.com/mobile/articles/fast_buttons.html

Upvotes: 1

Levi Kovacs
Levi Kovacs

Reputation: 1159

Just use the change event instead of the touchstart. It should be working in a desktop browser and a touch browser too.

Upvotes: 0

bjornd
bjornd

Reputation: 22951

As I know there is no need to implement touch events to achieve what you want. You can use common click event. It will be emulated by the browser of the device.

Upvotes: 1

Related Questions