How to Prevent Selecting of HTML Elements

Let's start with a barebones HTML page:

<!DOCTYPE html>
          <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>
          <p id="protectThis">Protect Me!</p>
          /** Inline JS here */

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

#protectThis { 
       -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;