Detecting a single tap in a UIWebView while maintaining support for text selection and links

Question

Detecting a single tap in a UIWebView while maintaining support for text selection and links

Currently, I am utilizing JavaScript to recognize taps within a page displayed in a UIWebView. Here is an example of my code:

<div id="wrapper">
  <a href="http://apple.com">Apple</a>
</div>
<script>
  document.getElementById("wrapper").addEventListener('click', function() {
      document.location = 'internal://tap';
  }, false);
</script>

My approach involves intercepting links using the web view delegate and searching for "internal://tap". Once found, I prevent navigation within the web view and handle the tap accordingly. However, this method causes the loss of text selection capability. Despite this issue, tapping the link itself continues to function as expected.

Interestingly, simply adding an event listener for 'click' results in the inability to select text, even if the handler does not manipulate the document location.

Do you have any insights on what mistakes I might be making?

javascript iphone ios uiwebview

Answer 1

Answer №1

It seems that adding a click listener to an element prevents text selection within that element on iOS. To work around this issue, I created a solution using touchstart, touchmove, and touchend events, along with a timer to handle multi-taps and checking the document selection to ensure no ongoing selection event.

Below is the JavaScript code implementation:

SingleTapDetector = function(element, handler) {
    this.element = element;
    this.handler = handler;

    element.addEventListener('touchstart', this, false);
};

SingleTapDetector.prototype.handleEvent = function(event) {
    switch (event.type) {
        case 'touchstart': this.onTouchStart(event); break;
        case 'touchmove': this.onTouchMove(event); break;
        case 'touchend': this.onTouchEnd(event); break;
    }
};

SingleTapDetector.prototype.onTouchStart = function(event) {
    this.element.addEventListener('touchend', this, false);
    document.body.addEventListener('touchmove', this, false);

    this.startX = this.currentX = event.touches[0].clientX;
    this.startY = this.currentY = event.touches[0].clientY;
    this.startTime = new Date().getTime();
};

SingleTapDetector.prototype.onTouchMove = function(event) {
    this.currentX = event.touches[0].clientX;
    this.currentY = event.touches[0].clientY;
};

SingleTapDetector.prototype.onTouchEnd = function(event) {
    var that = this;

    // Check for previous taps in this sequence
    if (this.tapTimer) {
        clearTimeout(this.tapTimer);
        this.tapTimer = setTimeout(function() {
            that.tapTimer = null;
        }, 300);
    } else {
        if (Math.abs(this.currentX - this.startX) < 4 &&
            Math.abs(this.currentY - this.startY) < 4) {
            if (new Date().getTime() - this.startTime <= 300) {
                if (window.getSelection() + '' == '') {                    
                    this.tapTimer = setTimeout(function() {
                        that.tapTimer = null;

                        that.handler(event);
                    }, 300);
                }
            }
        }
    }
};

new SingleTapDetector(document.body, function(event) {
    document.location = "internal://tap";
});

Answer 2

It seems that adding a click listener to an element prevents text selection within that element on iOS. To work around this issue, I created a solution using touchstart, touchmove, and touchend events, along with a timer to handle multi-taps and checking the document selection to ensure no ongoing selection event.

Below is the JavaScript code implementation:

SingleTapDetector = function(element, handler) {
    this.element = element;
    this.handler = handler;

    element.addEventListener('touchstart', this, false);
};

SingleTapDetector.prototype.handleEvent = function(event) {
    switch (event.type) {
        case 'touchstart': this.onTouchStart(event); break;
        case 'touchmove': this.onTouchMove(event); break;
        case 'touchend': this.onTouchEnd(event); break;
    }
};

SingleTapDetector.prototype.onTouchStart = function(event) {
    this.element.addEventListener('touchend', this, false);
    document.body.addEventListener('touchmove', this, false);

    this.startX = this.currentX = event.touches[0].clientX;
    this.startY = this.currentY = event.touches[0].clientY;
    this.startTime = new Date().getTime();
};

SingleTapDetector.prototype.onTouchMove = function(event) {
    this.currentX = event.touches[0].clientX;
    this.currentY = event.touches[0].clientY;
};

SingleTapDetector.prototype.onTouchEnd = function(event) {
    var that = this;

    // Check for previous taps in this sequence
    if (this.tapTimer) {
        clearTimeout(this.tapTimer);
        this.tapTimer = setTimeout(function() {
            that.tapTimer = null;
        }, 300);
    } else {
        if (Math.abs(this.currentX - this.startX) < 4 &&
            Math.abs(this.currentY - this.startY) < 4) {
            if (new Date().getTime() - this.startTime <= 300) {
                if (window.getSelection() + '' == '') {                    
                    this.tapTimer = setTimeout(function() {
                        that.tapTimer = null;

                        that.handler(event);
                    }, 300);
                }
            }
        }
    }
};

new SingleTapDetector(document.body, function(event) {
    document.location = "internal://tap";
});

Answer 3

Answer №2

Avoid using Javascript in this scenario as it is unnecessary. The UIGestureRecognizerDelegate already provides suitable methods to handle the task efficiently. Simply ensure that text selection does not trigger the tap recognizer.

- (BOOL)gestureRecognizer:(UIGestureRecognizer*)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    BOOL hasTap = ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]] ||
               [otherGestureRecognizer isKindOfClass:[UITapGestureRecognizer class]]);
    BOOL hasLongTouch = ([gestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]] ||
                     [otherGestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]]);
    if (hasTap && hasLongTouch) {
        // user is selecting text
        return NO;
    }
    return YES;
}

This approach addresses text selection effectively, and ensures that links function correctly without any issues.

Answer 4

Avoid using Javascript in this scenario as it is unnecessary. The UIGestureRecognizerDelegate already provides suitable methods to handle the task efficiently. Simply ensure that text selection does not trigger the tap recognizer.

- (BOOL)gestureRecognizer:(UIGestureRecognizer*)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer {
    BOOL hasTap = ([gestureRecognizer isKindOfClass:[UITapGestureRecognizer class]] ||
               [otherGestureRecognizer isKindOfClass:[UITapGestureRecognizer class]]);
    BOOL hasLongTouch = ([gestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]] ||
                     [otherGestureRecognizer isKindOfClass:[UILongPressGestureRecognizer class]]);
    if (hasTap && hasLongTouch) {
        // user is selecting text
        return NO;
    }
    return YES;
}

This approach addresses text selection effectively, and ensures that links function correctly without any issues.

Detecting a single tap in a UIWebView while maintaining support for text selection and links

Answer №1

Answer №2

Similar questions

Is there a way to link table A's ID to table B's userID in a postgreSQL database?

Enhance your website with a unique hover and left-click style inspired by the functionality of file explorer

What is the best way to sum up all the values per month from a JSON file in React and showcase it as a single month using ChartJs?

Can someone guide me on how to organize a div structure into a table format with the help of JQuery

A guide to crafting a renowned graph using Core Plot in Swift

Encountering a problem while trying to install the create-react-app package using npm

Hear for updates on Firebase data using AngularFire

Electron: X is not a function *** (Using callbacks with ipcrenderer/ipcmain)

Breaking on newline, excluding newline-space in JavaScript

Textures in Three.js are appearing black when loaded

Vue3 does not support parameter assignment

A basic demonstration of a C++ client communicating with a node.js server via a Unix socket

Strategies for reliably causing IE 10&11 to crash? Simulating the phenomenon of "Internet Explorer abruptly closing and reopening the tab"

Building objects with attributes using constructor functions

AngularJS: Click on image to update modelUpdate the model by clicking

Having trouble getting the Bootstrap navbar mega menu to function properly on an Asp.Net Core platform

Using Selenium with Python to interact with dropdown elements in webpages

Updating an AngularJS directive with a change in URL: Best practices

jQuery trigger event when a DropDownList/SELECT item is selected

What is the proper way to include jQuery script in HTML document?