Click on overlapping div using pointer-events and hide div
<p>I made this code so that once you click the "inner div", click go to the "outer div" using the "pointer-events: none;" in CSS.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#outer").click(function(){
alert("outer clicked")

});

$("#inner").click(function(e){
    alert("inner clicked")
    this.style.display = 'none'; 
    e.stopPropagation();
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#outer {
    width:300px;
     height:200px;
     border:3px solid;
     margin:auto;
     background: green;

}
#inner {
  pointer-events: none;
  position: absolute; 
  top: 150px; 
  left: 120px;
  width: 100px;
  height: 100px;
  background: yellow;
  border:3px solid;
  margin:auto;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div id="outer"&gt;
    &lt;div id="inner"&gt;inner div&lt;/div&gt;
     Outer div
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>OK, the function is perfect. But if you click anywhere within the outer div, I need the inner div to hide. I tried using <code>this.style.display = 'none';</code>, but it does not work.</p>