So entfernen Sie hervorgehobenen Text in der mobilen App von Framework7, wenn Sie auf andere Elemente tippen/tippen

Question

Aus irgendeinem Grund, wenn ich Text in der mobilen Web-Version einer Framework7 App markieren und andere Orte berühren, erwarte ich, dass das Highlight weg ist ... es wird beibehalten. Wenn ich jedoch auf dem Desktop-Web Text hervorhebe und irgendwo anders klicke, ist die Hervorhebung weg.

Wie kann ich das mobile Web beim Hervorheben eines Texts wie das Desktop-Web verhalten?

Ich habe versucht zu verhindernDefault auf Touchstart in der Hoffnung, es würde die Standard-Aufbewahrung oder Ereignisse verhindern ... aber es könnte etwas sein, das ich vermisse/nicht bekommen, weil mit oder ohne preventDefault ist es immer noch das gleiche Problem.

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

Vielen Dank!

Answer 1

Um Auswahlen zu löschen auf touchstart:

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

bearbeiten: Um nur die Auswahl zu löschen, wenn außerhalb des aktuellen Highlight angezapft, überprüfen die Berührungsposition, um sicherzustellen, fällt nicht in jeder Auswahl-Client 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

hatte die beste Antwort, die ich seit dem Projekt bin ich akzeptiert oben zu modifizieren, ES5 mit (Array.from nicht funktioniert) und auch ich hattezu ersetzenmit e.touches[0].clientX, gleiches gilt für e.clientY.

Das hat bei mir funktioniert.

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

Hinweis: Getestet auf einem Android-Gerät