他の要素をタップ/タップすると、Framework7モバイルウェブアプリで強調表示されたテキストを削除するにはどうすればよいですか？

Question

何らかの理由で、Framework7アプリのモバイルウェブ版のテキストを強調表示し、他の場所に触れるとハイライトが消えてしまいます...それは保持されています。しかし、デスクトップのWebで、テキストを強調表示して別の場所をクリックすると、強調表示は消えてしまいます。

テキストを強調表示する際にモバイルウェブがデスクトップウェブのように動作するようにするにはどうすればよいですか？

私はデフォルトでの保持やイベントを防ぐことを期待してtouchStartでpreventDefaultを試みました...しかし、それは私が行方不明であるか、preventDefaultの有無にかかわらず、同じ問題ではありません。

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

ありがとうございます！ touchstart時にすべての選択をクリアするには

Answer 1

：

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

編集：現在のハイライトの外にタップ場合にのみ選択を解除し、タッチ位置がいずれかの選択クライアントには該当しない確認してくださいrects：私は上だプロジェクトは、ES5（Array.fromが動作していない）を使用しているので

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

は、私は上記の受け入れ最良の答えを変更する必要がありましたし、また私はを交換しなければなりませんでしたを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デバイス