javascript - Prevent child elements from firing hard coded click event of parent elements -

i have div class called 'cat'. in mouseover event div displayed 2 anchor link on click event hard coded. when anchor clicked parent div click gets fired. tried return galse, not working. code below

         function onload()     {         $('.cat').css('cursor', 'pointer');         $('.cat').mouseenter(function (e) {             $('<div />', {                 'class': 'tip',                 html: 'name: ' + $(this).data('cat-name') + '<br/>web name: ' + $(this).data('web-name') + '<br/>total no. of subcategories: ' + $(this).data('total-subcategory') + '<br/><br/><a href="#" onclick = "return addsubcategory(' + $(this).data('cat-id') + ',this)">add sub category</a>&nbsp;<a href="#" onclick = "editcategory(' + $(this).data('cat-id') + ',this)">edit category</a> ',                 css: {                     position: 'fixed',                     top: e.pagey,                     left: e.pagex,                     border: '1px solid red',                     background: 'yellow',                     padding: '5px',                     font: '8'                 }             }).appendto(this);           });         $('.cat').mouseleave(function (e) {             $('.tip', this).remove();         });          $('.cat').on('click', getsubcategory);        }     function getsubcategory()     {          var clicked = $(this).parent().attr('id');         gatsubcategory(clicked);         return false;     }     function editcategory(catid,e) {         alert("edit " + catid);          return false;      }     function addsubcategory(catid,e) {         alert("add " + catid);          return false;     } 

you need use event.stoppropagation() prevents event bubbling in child elements click event(which anchor tag in case). this:

$('.cat a').click(function(e){     e.stoppropagation(); });