Does UIGestureRecognizer work on a UIWebView?

Asked 26/5, 2010 at 2:35 Answered 26/10, 2013 at 10:51

Solved iphone objective-c cocoa ipad uigesturerecognizer

I am attempting to get a UIGestureRecognizer working with a UIWebview which is a subview of a UIScrollView. This sounds odd but when I have the numberOfTouchesRequired set to 2 the selector fires, but when numberOfTouchesRequired is set to one the selector doesn't fire.

Here is my code:

UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(select1:)];
    tap1.numberOfTouchesRequired = 2;
    tap1.numberOfTapsRequired = 1;
    tap1.delegate = self;
    [self.ans1WebView addGestureRecognizer:tap1];
    [tap1 release];

- (void) select1:(UILongPressGestureRecognizer *)sender {
    //Do Stuff
}

I've confirmed this by using the Apple sample for UIGestureRecognizer and inserting a webview in their nib. Their tap code works everywhere but inside the area of the webview.

Arachne answered 26/5, 2010 at 2:35 Comment(0)

From what I have seen, UIWebView does not play well with others. For gesture recognizers, you could try returning YES from:

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer;

I had to be backwards compatible with 3.0 so I ended up doing all the gesture handling with Javascript inside the UIWebView. Not a good solution, but it worked for my needs. I was able to capture a long press on an element, as well as tap, swipe, pinch and rotate. Of course, I was using only local content.

Edit:

You can look in PhoneGap for an example of sending messages to the delegate of the UIWebView. In a nutshell, you use document.location = "myscheme:mycommand?myarguments" then parse out the command and arguments from this delegate callback:

-(BOOL) webView:(UIWebView *)inWeb shouldStartLoadWithRequest:(NSURLRequest *)inRequest navigationType:(UIWebViewNavigationType)inType {
  if ( [[[inRequest URL] absoluteString] hasPrefix:@"myscheme:"] ) {
    //.. parse arguments
    return NO;
  }
}

You can see in the PhoneGap code that they set up a queue and timer to send the messages. Depending on your usage, you may need to do the same thing. There are other questions on SO on this topic.

Here is the Event Handling documentation. In my case I added event listeners to document from <body onload="myloader();">

function myloader() {
    document.addEventListener( 'touchcancel' , touch_cancel , false );
    document.addEventListener( 'touchstart' , touch_start , false );
    document.addEventListener( 'touchmove' , touch_move , false );
    document.addEventListener( 'touchend' , touch_end , false );
};

The actual event handling depends a lot on your needs. Each event handler will receive a TouchEvent with a touches property where each item is a Touch. You can record the start time and location in your touchstart handler. If the touches move to far or the wrong amount of time passes it is not a long touch.

WebKit may try to handle a long touch to start a selection and copy. In your event handler you can use event.preventDefault(); to stop the default behavior. I also found the -webkit-user-select:none css property handy for some things.

var touch = {};
function touch_start( event /*TouchEvent*/ {
  event.preventDefault();
  touch = {};
  touch.startX = event.touches.item(0).pageX;
  touch.startY = event.touches.item(0).pageY;
  touch.startT = ( new Date() ).getTime();
}

This is only the second project I have used javascript with. You can find better examples elsewhere.

As you can see this is no quick answer to your problem. I am pretty happy with the results I got. The html I was working with had no interactive elements beyond a link or two.

Aiguillette answered 26/5, 2010 at 3:15 Comment(1)

Thanks, I know nothing of Javascript; would you be so kind as to point me in the right direction on how to detect a tap in a UIWebView via Javascript and call an Objective-C method? I wouldn't mind being compatible with 3.0 for non-iPad targeting. For any others that only care about 3.2+, I fixed my issue by simply creating a transparent view right on top of the UIWebView and detecting the taps therein. – Arachne 26/5, 2010 at 3:24

UIWebView has its own private views, which also has gesture recognizers attached. Hence, precedence rules keep any gesture recognizers added to a UIWebView from working properly.

One option is to implement the UIGestureRecognizerDelegate protocol and implement the method gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer. Return YES from this method for other tap gestures. This way you'll get your tap handler called, and the web view will still get its called.

See this on the Apple dev forums.

Namedropping answered 22/10, 2010 at 1:29 Comment(1)

See the 2nd answer in question for supplemental information: #2628434 – Shandishandie 11/4, 2011 at 21:35

This is a somewhat hack-ish solution, but it works. UIWebView has a lot of internal gesture recognizers that you normally cannot access without using private API. You get them all for free, though, when you implement gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer:. At that point, you can tell all the internal UITapGestureRecognizers to only fire when your own UITapGestureRecognizer has failed. You only do that once and then remove the delegate from your own gesture recognizer. The result is that you can still pan and scroll your webView, but it won't receive any (single) tap gestures anymore.

- (void)viewDidLoad 
{      
    [super viewDidLoad];

    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleTapGesture:)];

    // view is your UIViewController's view that contains your UIWebView as a subview
    [self.view addGestureRecognizer:tap];

    tap.delegate = self;
}

- (void)handleTapGesture:(UITapGestureRecognizer *)gestureRecognizer
{
    NSLog(@"tap!");

    // this is called after gestureRecognizer:shouldRecognizeSimultaneouslyWithGestureRecognizer: so we can safely remove the delegate here
    if (gestureRecognizer.delegate) {
        NSLog(@"Removing delegate...");
        gestureRecognizer.delegate = nil;
    }
}

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
    if ([otherGestureRecognizer isKindOfClass:[UITapGestureRecognizer class]]) {
        [otherGestureRecognizer requireGestureRecognizerToFail:gestureRecognizer];

        NSLog(@"added failure requirement to: %@", otherGestureRecognizer);
    }

    return YES;
}

Enjoy!

Birkner answered 16/9, 2013 at 18:36 Comment(0)

I was having the same problem. This solution worked for me:

1) Make sure to add the protocol to your interface: UIGestureRecognizerDelegate for example:

@interface ViewController : UIViewController <SlideViewProtocol, UIGestureRecognizerDelegate>

2) Add this line of code

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
return YES
}

3) Setup gesture

UISwipeGestureRecognizer *swipeGesture = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(nextSlide)];
swipeGesture.numberOfTouchesRequired = 1;
swipeGesture.direction = (UISwipeGestureRecognizerDirectionLeft);
swipeGesture.cancelsTouchesInView = YES; [swipeGesture setDelegate:self];
[self.view addGestureRecognizer:swipeGesture];

Column answered 28/5, 2013 at 5:49 Comment(2)

this answer should be edited to return the correct code in step # 2 (i.e. that API requires a BOOL to be returned). – Floccule 16/11, 2013 at 11:12

This is the simplest of the solutions presented and works for me, with two caveats. You need to return YES. And you must set the swipeGesture.delegate = self; – Sadducee 20/2, 2014 at 20:21

- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer*)otherGestureRecognizer {
    return YES;
}

Bronchiectasis answered 26/10, 2013 at 10:51 Comment(0)

Another way is to put a transparent UIButton on top of UIWebView and handle taps from this button. In some cases it might be a good solution.

UIWebView webView = [UIWebView new];
//...

UIButton *transparentButton = [UIButton buttonWithType:UIButtonTypeCustom];
[transparentButton addTarget:self action:@selector(buttonTapped) forControlEvents:(UIControlEventTouchUpInside)];
transparentButton.frame = webView.frame;
transparentButton.layer.backgroundColor = [[UIColor clearColor] CGColor];
[self.view transparentButton];

Generalist answered 6/9, 2013 at 17:20 Comment(2)

Hahah, this is definitely the best solution :) +1 for the hack. – Column 12/12, 2013 at 0:9

I use this method if I don’t need to scroll the UIWebView. But if you need to scroll, it doesn’t work since the UIButton traps all of the user input. – Sadducee 20/2, 2014 at 19:41

You may also find my answer here helpful. It's a working example of handling the pinch gesture in UIWebView's javascript.

(You could communicate the events back to the Objective-C if you wanted to. See my answer here.)

Astrology answered 2/9, 2010 at 21:37 Comment(0)

Recommended topics

Hot tags