title: How does this old jQuery function cause some error messages to be suppressed?
body: <p>This is a "please help me understand X" question, not a "please help me fix X" question.</p>
  
  <p>I was doing some work on a site with a legacy proprietary CMS that only works with jQuery 1.4.4 (ugh) when I realised my code must be <strong>hitting an error, but no error messages were showing in the console</strong> (in all browsers I tried - Chrome, Firefox, Safari, IE...). </p>
  
  <p>Lots of trial and error later, I figured out that within any code triggered by jQuery 1.4.4's <code>mouseenter</code> event (and therefore also its <code>hover</code> shorthand), errors weren't being shown in the console. <code>console.log</code> still logged just fine, and the code would fall over as would be expected, but silently.</p>
  
  <p>I don't understand how this is possible. I'd like to know how it is possible so that, if in future I end up in a similar position where code is hitting silent errors, I know what to look for - and so I know how to avoid causing a similar situation by accident.</p>
  
  <hr>
  
  <h2>Prior research</h2>
  
  <p>I've tried searching for old jQuery bug reports, which might include relevant information, but I couldn't find any. I've read through a lot of SO questions from people trying to cause JS error suppression, but the answers suggest it's a user preference that couldn't apply to some lines of code but not others. I've looked through the <a href="http://code.jquery.com/jquery-1.4.4.js" rel="nofollow noreferrer">jQuery 1.4.4 source code</a>, but nothing looks relevant to my eye.</p>
  
  <p><strong>I'm not interested in fixing the problem (that's as simple as updating jQuery)</strong> - but I'd like to understand what causes this to happen, because I can't see how it's possible. </p>
  
  <hr>
  
  <h2>Simple live demo</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    $(document).ready(function(){
       $('.mouseenter').mouseenter(function(){
        console.log("FAIL .mouseenter");
        FAIL; // fails silently
        console.log("hit error, so this code isn't reached");
       });
       $('.mouseover').mouseover(function(){
        console.log("FAIL .mouseover");
        FAIL; // shows error as expected
        console.log("hit error, so this code isn't reached");
       });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>div { height: 60px; background: #c1c1c1; margin: 10px; padding: 10px; }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;head&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="mouseenter"&gt;mouseenter - hides error on hover&lt;/div&gt;
  &lt;div class="mouseover"&gt;mouseover - shows error on hover&lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>After mouseovering around the console looks like this - <code>mouseover</code> shows error in console, <code>mouseenter</code> doesn't, but both hit the error and fall over:</p>
  
  <p><img src="https://i.stack.imgur.com/zFol0.png" alt="enter image description here"></p>