Nhấp chuột, di chuột qua và di chuột thử nghiệm không thể hoạt động cùng nhau?

Question

Tôi đang cố gắng thực hiện một nút rất đơn giản thay đổi màu dựa trên di chuột qua, nhấp chuột và nhấp chuột , tôi đang làm điều này trong nguyên mẫu và điều kỳ lạ là nếu tôi sử dụng di chuột qua và di chuột, sau khi tôi nhấp vào nút , nút này sẽ không thay đổi thành màu trắng, có vẻ như là do mouseout, đây là mã của tôi

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

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

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

làm cách nào để khắc phục? Cảm ơn.

Answer 1

Trừ khi có cái gì khác xảy ra ở chuột lên và ra, tại sao không sử dụng css?

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

Tuy nhiên, tôi hơi bối rối về chính xác những gì bạn muốn xảy ra. Giả sử bạn muốn nút màu trắng nếu nó đã được nhấp hoặc nếu con chuột trên nó. Tôi muốn có xử lý sự kiện nhấp chuột thêm một lớp nhấp, như vậy:

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

Và css như vậy

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

này có lợi thế là tách nhà nước - nhấp/không nhấp chuột phải và di chuột qua/không quá - từ kiểu - đen hoặc xám. Ngay bây giờ tất cả chúng được trộn lẫn với nhau, tạo ra sự nhầm lẫn và mở ra cho bạn những lỗi.

Answer 2

Nếu bạn di chuyển con trỏ ra khỏi nút sau khi nhấp vào nút đó, sự kiện cuối cùng sẽ bị loại bỏ, do đó, điều đó xảy ra cho dù bạn có nhấp hay không.

Nếu bạn muốn tránh hiệu ứng di chuột khi được nhấp, hãy thử đặt cờ khi nhấp và hủy sự kiện di chuột nếu cờ được đặt.

Answer 3

Bạn có nghĩa là bạn muốn nhấp chuột để gây ra thay đổi về tính chất thay đổi trong kiểu không được thay thế bằng cách di chuột? Nếu vậy, hãy thử sử dụng một lá cờ, như vậy:

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 4

Thiết lập một trạng thái để ngăn chặn những sự kiện khác:

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

Sử dụng CSS để di chuột và lớp được chọn để tô màu phần tử có lẽ là lựa chọn tốt nhất. Tuy nhiên, nếu bạn chỉ muốn khắc phục nhanh mã bạn đã có sẵn, bạn có thể ngừng quan sát sự kiện mouseout sau khi nó đã được nhấp.

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