यदि पैरेंट तत्व में माउसओवर भी है तो मेरे बच्चे के तत्व के लिए माउसओवर ईवेंट आग कैसे हो सकती है?

Question

मेरे पास मेरे पृष्ठ पर एक "सहायता" क्षेत्र है और जब भी उपयोगकर्ता किसी तालिका पर होवर करता है तो सहायता जानकारी अपडेट की जानी चाहिए। समस्या तालिका के भीतर है, मेरे पास प्रत्येक पंक्ति के 1 सेल में एक चेक बॉक्स है, और जब उपयोगकर्ता उस चेकबॉक्स पर होवर करता है, तो मैं तालिका ईवेंट को ओवरराइड करने के लिए चेकबॉक्स का माउसओवर ईवेंट चाहता हूं और चेकबॉक्स को प्रदर्शित करने में मदद करता हूं। वर्तमान में टेबल माउसओवर ठीक काम करता है लेकिन जब मैं चेकबॉक्स पर माउस करता हूं तो कुछ भी नहीं होता है।

<table class="myTable"> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 3</td> 
    </tr> 
</table> 

<div class="myHelpMenu"></div> 


$('.myCheckbox').mouseover(function() { 
    $('.myHelpMenu').html("this is my checkbox help"); 
}); 

$('.myTable').mouseover(function() { 
    $('.myHelpMenu').html("this is my tables help"); 
}); 

Answer 1

LIVE DEMO

यह mouseover वर्तमान target तत्व यह है कि hovered है, पुन: प्राप्त करने का उपयोग कर शुद्ध जे एस का उपयोग करने से पता लगाने के लिए एक अच्छा तरीका है .tagName आप एक संदेशों सूची वस्तु बना सकते हैं और वांछित एक पुनर्प्राप्त करें।

$('.myTable').mouseover(function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

}); 

---

आप अपनी जानकारी संदेश साफ़ करना चाहते हैं पसंद है:

$('.myTable').on('mouseover mouseleave',function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

    if(e.type=='mouseleave') 
    $('.myHelpMenu').empty(); 

}); 

Answer 2

तालिका के लिए mouseover के बाद से, पूरे क्षेत्र के लिए है बस बजाय mouseenter कहते हैं। फिर आप तालिका छोड़ने के बाद mouseout को फिर से भरने के लिए जोड़ सकते हैं।

Answer 3

लगता है जैसे आप टेबल पर चेकबॉक्स स्टॉप प्रचार के लिए माउसओवर रखना चाहते हैं?

यदि ऐसा है, तो इसे करना चाहिए।

$('.myCheckbox').mouseover(function(e) { 
    $('.myHelpMenu').html("this is my checkbox help"); 
    e.stopPropagation(); 
});