javascript - Disabling mouse events on 'div' -

I have an interesting problem in disabling mouse events using the 'pointer-event' CSS style.

Please see there are parents and two children, and I make 'pointer-events' one of the children 'none'. If I click on that div, its mouse listeners are not triggered (this is expected), but its parent div's mouse events are triggered.

  $ ('# parent'). Click (function () {console.log ("parent-click");});   
 How to disable mouse events on the mount event, if I click on my kids which are disabled for mouse events?  
 Click on an option "Maternal Condition"  
 Please provide some help :)  
 Thanks, Rita   
 P>  
 
 
 I mean that I want to do the work of indicators-events, so I changed javascript So what you wanted to achieve. What I did was event.stopPropagation child2, you can click it and only fire its click event, its parents do not have a click event. By the way, I know little about jquery, so I wrote a mixed bitwain pure javascript and jquery, hope someone can help me out.  
 CSS:  
 child1 { 
  background-color: # FF0000; Width: 100px; Height: 100px; Pointer-phenomena: all;   
}  
 child 2 { 
  background color: # 00ff00; Width: 100px; Height: 100px; Pointer-phenomena: all;   
}  
 guardian { 
  indicator-events: none;   
}  
 Javascript:  
  $ (document) .ready (function () {document.getElementById ('child1') .addEventListener ('click', function () {console.log ("child1 clicked");}, false); document.getElementById ('child2'). AddEventListener ('click', function (e) {e.stopImmediatePropagation ( ("Parent click");}, wrong); console.log ("child2 clicked");}, false); document.getElementById ('parent'). AddEventListener ('click', function () {console Log};});