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

Question

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

在突出显示文本时，如何使移动网络的行为像桌面网络一样？

我试图在 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();
})