title: HTML contenteditable works when tabbed into but not when clicked into
body: <p>I want to have a <code>span</code> content editable so I've added the <code>contentEditable ="true"</code> attribute to the span element but it is only editable if I tab into the field with the keyboard, but if I click on the text with the mouse cursor it's not editable. I thought there might be some event listener doing something funky so I did a nasty hack to override the onclick and onfocus events to do nothing and not propagate to ancestor event listeners</p>
  
  <pre><code>&lt;span 
      onclick="javascript:return false;" 
      onfocus="javascript:return false;"  
      contentEditable ="true"&gt;Edit Me&lt;/span&gt;
  </code></pre>
  
  <p>As an example for it not working the title <code>Gold Coast Waters 3 Day Forecast</code> should be editable on the following page:
  <a href="http://preview.test.coastwatch.com.au/3-day-forecast?region=GoldCoastWaters" rel="nofollow noreferrer">Non-Working Example</a></p>
  
  <p>The fiddle below for <code>contenteditable</code> works so there is something in my code that is preventing this from working and I can't seem to narrow down what it is.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// find elements
  var banner = $("#banner-message")
  var button = $("button")
  
  // handle click and add class
  button.on("click", function(){
    banner.addClass("alt")
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  #banner-message {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
  }
  
  button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  #banner-message.alt {
    background: #0084ff;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  #banner-message.alt button {
    background: #fff;
    color: #000;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="banner-message"&gt;
    &lt;span contenteditable="true"&gt;Hello World&lt;/span&gt;
    &lt;button&gt;Change color&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Any ideas on what is preventing the editing when I click on the <code>span</code>? </p>