النموذج نقرة، تمرير الماوس وmouseout لا يمكن أن تعمل معا؟

Question

وأنا أحاول أن تفعل زر بسيطة جدا أن يتغير لونها على أساس عند تمرير الماوس، mouseout و انقر فوق، وأنا أفعل هذا في النموذج والشيء الغريب هو إذا كنت مرر الفأرة فوق وmouseout، بعد الأول بالضغط على الزر، فإن زر لن تتغير إلى اللون الأبيض، ويبدو وكأنه هو بسبب 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' });
});

وكيف يمكنني إصلاحه؟ شكرا.

Answer 1

واذا لم يكن هناك شيء آخر يحدث في الماوس فوق والخروج، لماذا لا تستخدم المغلق؟

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

ولكن، أنا مرتبك قليلا فيما يتعلق بالضبط ما تريد أن يحدث. على افتراض انك تريد الزر الأبيض إذا تم النقر عليه أو إذا كان الفأر هو أكثر من ذلك. كنت قد معالج الحدث انقر فوق إضافة فئة النقر عليها، مثل ذلك:

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

والمغلق بحيث

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

وهذا له ميزة فصل الدولة - النقر / لا مزدوجا فوق والماوس فوق / لم تنته بعد - من النمط - أسود أو رمادي. الحق الآن انهم جميعا ممزوجة معا، وخلق البلبلة وفتح نفسك إلى الخلل.

Answer 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;
});

Answer 3

إذا قمت بنقل المؤشر بعيدا عن الزر بعد النقر على ذلك، والحدث الأخير هو mouseout، لذلك يحدث بغض النظر عن إذا قمت بالنقر فوق أم لا.

إذا كنت ترغب في تجنب تأثير mouseout عند النقر عليه، حاول وضع العلم عند النقر وabortind الحدث mouseout إذا تم تعيين العلم.

Answer 4

وتعيين الحالة إلى منع أحداث أخرى:

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' });
});

Answer 5

<ع> استخدام CSS لتحوم والفئة المحددة للون العنصر هو على الارجح أفضل خيار. ومع ذلك، إذا كنت ترغب فقط في حل سريع لرمز لديك بالفعل في المكان الذي يمكن أن تتوقف مراقبة الحدث mouseout بعد أن تم النقر عليه.

$("izzy").observe('click', function(e) {
     e.element().setStyle({ color: '#FFFFFF' });
     e.element().stopObserving('mouseout');
});