javascript - Parent Div's mouse out function is called on mouseover of child element - Stack Overflow

admin管理员组

文章数量:1414923

I have the below HTML in my page

    <div id='divContainer1' onmouseover=ShowEditDiv(1) onmouseout=HideEditDiv(1)  class='divClcContainer'>
        <div id='divSlNo1'>1</div>
        <div id='divItem1'>This is content</div>
        <div id='divEditLink1'></div>
    </div>  
    <div id='divContainer2' onmouseover=ShowEditDiv(2) onmouseout=HideEditDiv(2)  class='divClcContainer'>
        <div id='divSlNo2'>2</div>
        <div id='divItem2'>This is content2</div>
        <div id='divEditLink2'></div>
    </div>  

and in my javascript

function ShowEditDiv(divId)
{
  $("#divEditLink" + divId).html("<a href=\"javascript:Edit(divId)\"><img  src='edit_icon.gif' alt='Edit' title='Edit' /></a>").addClass("divEdit");
}
function HideEditDiv(divId) 
{  
  $("#divEdit" + divId).empty().addClass('divEdit');
}

My requirement is to show an edit link when user place his mouse over the master div. Now its working fine.But when i place mouse over the div which holds the edit image/link, it is disappearing. I found that when i place mouse over the edit div, the mouseout function of parent div is getting called. Can any one help me to solve this ?

I have the below HTML in my page

    <div id='divContainer1' onmouseover=ShowEditDiv(1) onmouseout=HideEditDiv(1)  class='divClcContainer'>
        <div id='divSlNo1'>1</div>
        <div id='divItem1'>This is content</div>
        <div id='divEditLink1'></div>
    </div>  
    <div id='divContainer2' onmouseover=ShowEditDiv(2) onmouseout=HideEditDiv(2)  class='divClcContainer'>
        <div id='divSlNo2'>2</div>
        <div id='divItem2'>This is content2</div>
        <div id='divEditLink2'></div>
    </div>  

and in my javascript

function ShowEditDiv(divId)
{
  $("#divEditLink" + divId).html("<a href=\"javascript:Edit(divId)\"><img  src='edit_icon.gif' alt='Edit' title='Edit' /></a>").addClass("divEdit");
}
function HideEditDiv(divId) 
{  
  $("#divEdit" + divId).empty().addClass('divEdit');
}

My requirement is to show an edit link when user place his mouse over the master div. Now its working fine.But when i place mouse over the div which holds the edit image/link, it is disappearing. I found that when i place mouse over the edit div, the mouseout function of parent div is getting called. Can any one help me to solve this ?

• javascript
• mouseover
• inline-editing

Share Improve this question Follow asked Oct 8, 2009 at 5:21 ShyjuShyju 219k106106 gold badges420420 silver badges498498 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The solution to this error is to use mouseenter and mouseleave events instead of mouseover and mouseout.

More information on this present in this link

http://jquery-howto.blogspot./2009/04/problems-with-jquery-mouseover-mouseout.html

Use

stopPropagation in child elements function.

Stops the bubbling of an event to parent elements, preventing any parent handlers from being notified of the event.

本文标签： javascriptParent Div39s mouse out function is called on mouseover of child elementStack Overflow