Skip to main content

Does UIGestureRecognizer work on a UIWebView?


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.


Source: Tips4allCCNA FINAL EXAM

Comments

  1. 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.

    ReplyDelete
  2. 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.

    ReplyDelete
  3. 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.)

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex