如何在触摸/点击其他元素时删除Framework7移动网络应用上突出显示的文本？

Question

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

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

我试图阻止touchstart上的默认,希望它能阻止默认保留或事件...但它可能是我缺少/没有得到的东西因为有或没有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();
})