如何在其他元素 touch/tap 时删除 Framework7 移动网络应用程序上突出显示的文本？

Question

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

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

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

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

非常感谢！

Answer 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();
})

Answer 2

不得不修改我上面接受的最佳答案，因为我正在进行的项目正在使用 ES5（Array.from 不工作）而且我不得不用 [=13= 替换 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();
});

注意：在 android 设备上测试

如何在其他元素 touch/tap 时删除 Framework7 移动网络应用程序上突出显示的文本？

How to remove highlighted text on Framework7 mobile web app when touch/tap on other elements?

css

touch

mobile-website

html-framework-7