在UIWebView中检测单击，但仍支持文本选择和链接 [英] Detect single tap in UIWebView, but still support text selection and links

问题描述

我正在使用JavaScript检测我在UIWebView中显示的页面中的点击，如下所示：

I'm using JavaScript to detect taps in a page I'm showing in a UIWebView, like so:

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

我正在拦截与我的网络视图委托的链接，并寻找internal：// tap 。当我得到它时，我阻止Web视图导航，并响应点击。但是这样做我失去了选择文本的能力。点击链接仍然可以正常工作。

I'm intercepting links with my web view delegate, and look for "internal://tap". When I get that, I prevent the web view from navigating, and respond to the tap. However doing this I lose the ability to select text. Tapping the link does still work correctly.

事实上，只是为点击添加事件监听器会删除选择文本的功能，即使处理程序没有尝试更改文档位置。

In fact, just adding an event listener for 'click' removes the ability to select text, even if the handler doesn't attempt to change the document location.

知道我做错了吗？

推荐答案

显然，如果在元素上放置一个单击侦听器，则无法再在iOS上的该元素中选择文本。我的解决方案是使用touchstart，touchmove和touchend事件的组合检测点击，以及忽略多次点击的计时器，并检查当前文档选择以确保选择事件不会继续。

Apparently if you put a click listener on an element, you can no longer select text within that element on iOS. My solution was to detect taps using a combination of touchstart, touchmove, and touchend events, along with a timer to ignore multi-taps, and checking the current document selection to make sure a selection event is not going on.

这是我使用的JS代码：

Here's the JS code I used:

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;

    // Has there been one or more taps in this sequence already?
    if (this.tapTimer) {
        // Reset the timer to catch any additional taps in this sequence
        clearTimeout(this.tapTimer);
        this.tapTimer = setTimeout(function() {
            that.tapTimer = null;
        }, 300);
    } else {
        // Make sure the user didn't move too much
        if (Math.abs(this.currentX - this.startX) < 4 &&
            Math.abs(this.currentY - this.startY) < 4) {
            // Make sure this isn't a long press
            if (new Date().getTime() - this.startTime <= 300) {
                // Make sure this tap wasn't part of a selection event
                if (window.getSelection() + '' == '') {                    
                    // Make sure this tap is in fact a single tap
                    this.tapTimer = setTimeout(function() {
                        that.tapTimer = null;

                        // This is a single tap
                        that.handler(event);
                    }, 300);
                }
            }
        }
    }
};

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

这篇关于在UIWebView中检测单击，但仍支持文本选择和链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！