Как удалить выделенный текст в мобильном веб-приложении Framework7 при касании/нажатии на другие элементы?

Question

По какой-то причине, когда я выделяю текст в мобильной веб-версии приложения Framework7 и касаюсь других мест, я ожидаю, что подсветка исчезнет ... она сохраняется. Однако, на рабочем столе, когда я выделяю текст и нажимаю в другом месте, подсветка исчезла.

Как заставить мобильный веб-сайт вести себя как настольный компьютер при подсветке текста?

Я попытался предотвратить проблему с сенсорным экраном, надеясь, что это предотвратит удержание или события по умолчанию, но это может быть что-то еще, что я пропускаю/не получаю, потому что с или без 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, sames идет для 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(); 
}); 

Примечание: Проверено на андроид устройства