Question: 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.

```js
$("#outer").click(function(){
alert("outer clicked")

});

$("#inner").click(function(e){
    alert("inner clicked")
    this.style.display = 'none'; 
    e.stopPropagation();
});
```

```css
#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;

}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
    <div id="inner">inner div</div>
     Outer div
</div>
```

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

Answer: 
You only need one event listener on `#outer`, to hide the inner div when `#outer` has been clicked.

```js
$('#outer').click(function (e) {
    $('#inner').hide();
});
```

```css
#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;

}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
    <div id="inner">inner div</div>
     Outer div
</div>
```
```js
$("#outer").click(function(){
alert("outer clicked")

});

$("#inner").click(function(e){
    alert("inner clicked")
    this.style.display = 'none'; 
    e.stopPropagation();
});
```

```css
#outer {
 width:300px;
 height:200px;
 border:3px solid;
 margin:auto;
 background: green;
 position:relative;

}
#inner {
  position: absolute; 
  top: 150px; 
  left: 120px;
  width: 100px;
  height: 100px;
  background: yellow;
  border:3px solid;
  margin:auto;
  z-index:10;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
    <div id="inner">inner div</div>
     Outer div
</div>
```

In your example, the use of `pointer-events` is to allow click or tap behaviour to “pass through” an element to another element.