Stop Propagation in Jquery..

Stop Propagation in Jquery :-

The event.stopPropagation() method stops the bubbling of an event to parent elements, preventing any parent event handlers from being executed.

Tip: Use the event.isPropagationStopped() method to check whether this method was called for the event.

For supporting document file:-

 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Html

<div class="pull-right">

<div class="clr"></div>

<div class="cirecel-search"><i class="fa fa-search" aria-hidden="true"></i></div>

 <div class="clr"></div>

 <div class="outer-serch">

<form class="search-form">
<input type="search" placeholder="Search …" class="search-field">
</form>
</div>

</div>

Css

.clr{ clear:both;}
.cirecel-search{ border-radius:50%; width:30px; height:30px; color:#FFFFFF; text-align:center; padding-left:2px; padding-top:3px; display:block; background-color:#993366; margin-top:40px; margin-right:30px; cursor:pointer; float:right}
.search-form{ margin-top:5px; width:300px; float:right; }
.outer-serch{ float:right; display: none;}

js

<script type="text/javascript">
$(document).ready(function(e) {

  $(document).on('click', function(e) {
           $('.outer-serch').removeClass('show');              
         
        });

  $('.cirecel-search').on('click', function(event){
            event.stopPropagation();
        });

    $('.search-form').on('click', function(event){
            event.stopPropagation();
        });



  $('.cirecel-search').on('click', function () {
            if(!$('.outer-serch').hasClass( "show" ))
                $('.outer-serch').addClass('show');
            else
                $('.outer-serch').removeClass('show');
        });

});
</script>