How to remove selected text in Framework7 mobile web application when touching / clicking on other elements?

Question

For some reason, when I select text in the mobile web version of Framework7 and touch other places, I expect the highlight to disappear ... it will be saved. However, on the desktop on the Internet, when I select text and click elsewhere, there is no backlight.

How can I make a mobile network behave like a website while highlighting text?

I tried to prevent Default on touchstart, hoping that this would prevent saving or events by default ... but it could be something else that I am missing / failing because with or without warning, Default is still the same problem.

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

Thanks a lot!

Answer 1

To clear all selections from touchstart :

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

Change To clear the selection only if selected outside the current selection, make sure that the touch position does not fall into any clicks of the client’s choice:

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

I had to change the best answer that I accepted above, because the project I'm working on uses ES5 ( Array.from does not work), and I also had to replace e.clientX with e.touches[0].clientX , the sames goes for e .clientY.

This is what worked for me.

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

NOTE. Tested on Android device.