触摸/点击其他元素时如何删除 Framework7 移动 Web 应用程序上突出显示的文本？答案

【问题标题】：How to remove highlighted text on Framework7 mobile web app when touch/tap on other elements?触摸/点击其他元素时如何删除 Framework7 移动 Web 应用程序上突出显示的文本？
【发布时间】：2016-10-05 03:56:34
【问题描述】：

由于某种原因，当我在 Framework7 应用程序的移动网络版本中突出显示文本并触摸其他地方时，我希望突出显示消失......它被保留了。但是，在桌面网络上，当我突出显示文本并单击其他位置时，突出显示消失了。

如何让移动网络在突出显示文本时表现得像桌面网络？

我试图在 touchstart 上阻止默认设置，希望它可以阻止默认保留或事件...但它可能是我缺少/没有得到的其他东西，因为无论有或没有 preventDefault，它仍然是同一个问题。

$('.content').on('touchstart', function(e) {
   e.preventDefault();
});

非常感谢！

【问题讨论】：

你有更多的细节，或者你可以发布一个例子吗？了解您正在使用哪种浏览器、哪种设备以及哪种网页/应用程序会很有帮助。
我在 Framework7 中用视频报告了它，但是它的优先级很低，所以我决定将它作为一般问题放在 StackOverflow 中，看看我是否可以做任何事情来修复它github.com/nolimits4web/Framework7/issues/…

标签： css touch mobile-website html-framework-7

【解决方案1】：

清除touchstart上的所有选择：

$(window).on('touchstart', function(){
    window.getSelection().removeAllRanges()
})

编辑：要仅在当前突出显示之外点击时清除选择，请检查以确保触摸位置不落在任何选择客户端矩形中：

$(window).on('touchstart', function(e){
    var selection = window.getSelection();
    var tappedOnSelection = selection.rangeCount && Array.from(selection.getRangeAt(0).getClientRects()).some(function(rect){
        return e.clientX >= rect.left && e.clientX <= rect.right && e.clientY >= rect.top  && e.clientY <= rect.bottom;
    });
    if(!tappedOnSelection){
        selection.removeAllRanges();
    }
})
$(window).on('touchend', function(e){
    e.preventDefault();
})

【讨论】：

你好@darrylyeo 非常感谢你这个工作但是当我突出显示文本并点击它时......突出显示也消失了......有没有我可以说的情况，如果突出显示的文本是点击的，不删除突出显示？ :)
您更新后的答案的效果与旧答案相同...当我点击突出显示的文本时，它将被删除。我提供赏金，因为您能够解决其中一个问题并且它即将到期......我还没有弄清楚点击时消失的问题：p 谢谢。
我终于能够解决它，问题出在 Array.from 因为我正在处理的项目使用 ES5 和 e.client... 在下面发布了我的答案。

【解决方案2】：

必须修改我在上面接受的最佳答案，因为我正在进行的项目使用的是 ES5（Array.from 不起作用），而且我必须用 e.touches[0].clientX 替换 e.clientX，同样适用于 e.clientY .

这对我有用。

$(window).on('touchstart', function(e){
    var selection = window.getSelection();
    var tappedOnSelection = false;

    if(selection.rangeCount) {
        var args = [].slice.call(selection.getRangeAt(0).getClientRects());

        tappedOnSelection = args.some(function(rect){
            var top = e.touches[0].clientY;
            var left = e.touches[0].clientX;

            return left >= rect.left && left <= rect.right && top >= rect.top  && top <= rect.bottom;
        });
    }


    if(!tappedOnSelection){
        selection.removeAllRanges();
    }
});

$(window).on('touchend', function(e){
    e.preventDefault();
});

注意：在安卓设备上测试

【讨论】：