Jak usunąć zaznaczony tekst w aplikacji mobilnej Framework7 po dotknięciu/dotknięciu innych elementów?

Question

Z jakiegoś powodu, kiedy podkreślam tekst w mobilnej wersji internetowej aplikacji Framework7 i dotykam innych miejsc, oczekuję, że podświetlenie zniknie ... zostanie zachowane. Jednak w internecie komputerowym, gdy zaznaczam tekst i klikam gdzieś indziej, wyróżnienie zniknęło.

Jak sprawić, aby sieć mobilna zachowywała się tak, jak podświetlając tekst na pulpicie?

Próbowałem zapobiec Dezinstalacji na tablecie dotykowej, mając nadzieję, że uniemożliwi to domyślną retencję lub zdarzenia ... ale może to być coś innego, czego mi brakuje/nie dostaję, ponieważ z prewencją lub bez niej nadal jest ten sam problem.

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

Wielkie dzięki!

Answer 1

Aby usunąć wszystkie pozycje na touchstart:

$(window).on('touchstart', function(){ 
    window.getSelection().removeAllRanges() 
}) 

Edycja: Aby tylko wyczyścić zaznaczenie jeśli podsłuchu poza bieżącym podświetleniem, upewnij się, dotyk pozycja nie wchodzi w dowolnym klientem selekcji rects:

$(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

musieliśmy zmodyfikować najlepszą odpowiedź przyjąłem wyżej od projektu jestem na korzystającą ES5 (Array.from nie działa), a także musiałem zastąpić e.clientX z e.touches[0].clientX, sames idzie na e.clientY.

To właśnie dla mnie zadziałało.

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

UWAGA: Testowany na urządzeniu android