How to Prevent Selecting of HTML Elements

Let's start with a barebones HTML page:


<!DOCTYPE html>
<html>
    <head>
          <meta charset='UTF-8'>
          <meta name='keywords' content='Barebones HTML'>
          <meta name='author' content='You'>

          <!-- External JS -->
          <!-- <script src=''></script> -->

          <!-- External CSS -->
          <!-- <link href="" rel="stylesheet" type="text/css"> -->

          <title>Content Protection Example</title>
    </head>
    <body>
          <p id="protectThis">Protect Me!</p>
    </body>
    <script>
          /** Inline JS here */
    </script>
</html>


Prevent any touch or selection action in mobile or desktop
(thereby preventing copying of asset)


#protectThis { 
       pointer-events:none; 
       -webkit-user-select: none; 
       -webkit-touch-callout: none; 
       -ms-user-select: none; 
       -moz-user-select: none; 
       user-select: none; 
}


Prevent right-click and saving of asset
Here we use jQuery


$(document).ready(function() {
    $('#protectThis').bind('contextmenu', function (e) {
        return false;
    });
    $('#protectThis').mousedown(function (e) {
        if(e.button == 2) {
            return false;
        }
    });
});