प्रोटोटाइप क्लिक करें, अपना माउस ले और mouseout एक साथ काम नहीं कर सकते?

वोट
5

मैं एक बहुत ही सरल बटन कि माउसओवर के आधार पर रंग बदल जाता है, mouseout और क्लिक करें, मैं प्रोटोटाइप में यह कर रहा हूँ और अजीब बात यह है कि अगर मैं माउसओवर और mouseout इस्तेमाल किया है करने के लिए कोशिश कर रहा हूँ, के बाद मैं बटन पर क्लिक किया, बटन wouldn 'टी, सफेद करने के लिए बदल रहा है जैसे कि यह mouseout की वजह से है, यहाँ मेरा कोड यह है

$(izzy).observe('mouseover', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

$(izzy).observe('mouseout', function() {
     $('izzy').setStyle({ color: '#666666' });
});

$(izzy).observe('click', function() {
     $('izzy').setStyle({ color: '#FFFFFF' });
});

मेरे द्वारा यह कैसे किया जा सकता है? धन्यवाद।

05/11/2008 को 17:55
का स्रोत उपयोगकर्ता
अन्य भाषाओं में...                            


5 जवाब

वोट
0

आप उस पर क्लिक करने के बाद बटन से दूर कर्सर ले जाते हैं, पिछले घटना mouseout है, इसलिए यदि आप क्लिक करें या नहीं यह कोई फर्क नहीं पड़ता होता है।

आप mouseout प्रभाव से बचने के लिए जब यह क्लिक किया जाता है चाहते हैं, जब क्लिक करने एक ध्वज सेट करके देखें और mouseout घटना abortind अगर ध्वज सेट है।

05/11/2008 को 18:01
का स्रोत उपयोगकर्ता

वोट
2

क्या आपका मतलब है कि आप माउस शैली है कि mouseout द्वारा प्रतिस्थापित नहीं किया गया है में एक स्थायी परिवर्तन के कारण के लिए क्लिक करें वान? यदि हां, तो एक ध्वज का उपयोग, इसलिए तरह का प्रयास करें:

var wasClicked = false;

$("izzy").observe('mouseover', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#FFFFFF' });
});

$("izzy").observe('mouseout', function() {
    if (!wasClicked) $('izzy').setStyle({ color: '#666666' });
});

$("izzy").observe('click', function() {
    $('izzy').setStyle({ color: '#FFFFFF' });
    wasClicked = true;
});
05/11/2008 को 18:06
का स्रोत उपयोगकर्ता

वोट
0

अन्य घटनाओं को रोकने के लिए एक स्थिति सेट करें:

var clicked = false
$("izzy").observe('mouseover', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#FFFFFF' });
     }
});

$("izzy").observe('mouseout', function() {
     if(!clicked) {
        $('izzy').setStyle({ color: '#666666' });
     }
});

$("izzy").observe('click', function() {
    clicked = true
    $('izzy').setStyle({ color: '#cccccc' });
});
05/11/2008 को 18:07
का स्रोत उपयोगकर्ता

वोट
6

वहाँ कुछ और पर और बाहर माउस में हो रहा है जब तक, क्यों सीएसएस का उपयोग नहीं?

#izzy:hover { color: '#FFFFFF'; }

हालांकि, मैं एक छोटे से वास्तव में क्या आप क्या करना चाहते करने के लिए के रूप में उलझन में हूँ। मान लें कि आप बटन सफेद चाहते हैं, तो यह क्लिक किया गया है या अगर माउस यह खत्म हो गया है। मैं क्लिक ईवेंट हैंडलर इसलिए की तरह एक क्लिक किए गए वर्ग, जोड़ने होगा:

$("izzy").observe('click', function() {
    $('izzy').addClass('selected');
});

और सीएसएस के रूप में तो

#izzy { color: '#666666'; }
#izzy:hover, #izzy.selected { color: '#FFFFFF'; }

इस राज्य को अलग करने का लाभ दिया है - काला या ग्रे - शैली से - नहीं-क्लिक करें और माउस / खत्म नहीं क्लिक किया /। अभी वे सभी एक साथ मिश्रित कर रहे हैं, भ्रम की स्थिति पैदा करने और कीड़े के लिए अपने आप को खोलने के।

05/11/2008 को 18:08
का स्रोत उपयोगकर्ता

वोट
0

एक हॉवर और एक चयनित वर्ग तत्व रंग करने के लिए के लिए सीएसएस का उपयोग करना शायद सबसे अच्छा विकल्प है। हालांकि, अगर आप केवल आपके कोड करने के लिए त्वरित सुधार चाहते हैं पहले से ही जगह में आप mouseout घटना को देख रोक सकता है के बाद यह क्लिक किया गया है है।

$("izzy").observe('click', function(e) {
     e.element().setStyle({ color: '#FFFFFF' });
     e.element().stopObserving('mouseout');
});
04/12/2008 को 19:48
का स्रोत उपयोगकर्ता

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more