Cách xóa văn bản được đánh dấu trên ứng dụng web di động Framework7 khi chạm/chạm vào các yếu tố khác?

Question

Vì một số lý do, khi tôi đánh dấu văn bản trong phiên bản web di động của ứng dụng Framework7 và chạm vào các địa điểm khác mà tôi mong đợi đánh dấu là đã biến mất ... nó đang được giữ lại. Tuy nhiên, trên web trên máy tính để bàn, khi tôi đánh dấu văn bản và nhấp vào một nơi khác, phần đánh dấu đã biến mất.

Làm cách nào để làm cho web di động hoạt động như web trên máy tính để bàn khi tô sáng văn bản?

Tôi đã cố gắng ngăn chặnDefault trên touchstart với hy vọng nó sẽ ngăn chặn lưu giữ hoặc sự kiện mặc định ... nhưng nó có thể là một cái gì đó khác mà tôi đang thiếu/không nhận được vì có hoặc không ngăn chặnDefault nó vẫn là vấn đề tương tự.

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

Cảm ơn rất nhiều!

Answer 1

Để xóa tất cả các lựa chọn trên touchstart:

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

Sửa: Để chỉ rõ ràng sự lựa chọn nếu khai thác bên ngoài nổi bật hiện nay, kiểm tra để chắc chắn rằng các vị trí liên lạc không rơi vào bất kỳ khách hàng lựa chọn dễ phân biệt:

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

đã phải thay đổi câu trả lời tốt nhất mà tôi chấp nhận ở trên kể từ khi dự án tôi đang trên đang sử dụng ES5 (Array.from không đang làm việc) và tôi cũng đã phải thay e.clientX với e.touches[0].clientX, sames đi cho e.clientY.

Đây là những gì phù hợp với tôi.

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

LƯU Ý: Thử nghiệm trên một thiết bị Android