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

Answer 2

由于我所使用的项目使用的是ES5（Array.from无效），因此我必须修改上面接受的最佳答案，而且我必须将e.clientX替换为e.touches[0].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设备上测试

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

2 个答案: