프로토 타입 클릭, 마우스 오버 및 마우스 아웃은 함께 작동 할 수 없습니까?

Question

마우스 오버, 마우스 아웃 및 클릭을 기반으로 색상을 변경하는 매우 간단한 버튼을 만들려고 노력하고 있습니다. 프로토 타입 에서이 작업을 수행하고 있으며, 버튼을 클릭 한 후 버튼을 클릭 한 후 마우스 오버와 마우스 아웃을 사용한 경우 이상한 것은 버튼이 있습니다. 't는 흰색으로 바뀌고 마우스 아웃 때문인 것 같습니다. 여기 내 코드가 있습니다.

$("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

마우스에서 다른 일이 일어나지 않는 한 CSS를 사용하지 않는 이유는 무엇입니까?

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

그러나 나는 당신이 정확히 무슨 일이 일어나고 싶은지에 대해 약간 혼란스러워합니다. 버튼을 클릭했거나 마우스가 끝나는 경우 흰색을 원한다고 가정합니다. 클릭 이벤트 핸들러에 클릭 클래스를 추가 할 수 있습니다.

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

그리고 CSS

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

이것은 스타일에서 검은 색 또는 회색으로부터 오버/오버/오버를 오버/오버로 오버/오버/아님 상태를 분리하는 이점이 있습니다. 지금 그들은 모두 함께 혼합되어 혼란을 일으키고 버그에 자신을 열어줍니다.

Answer 2

마우스를 클릭하여 마우스 아웃으로 대체되지 않은 스타일의 퍼메넌트 변경을 유발한다는 것을 의미합니까? 그렇다면 다음과 같은 깃발을 사용해보십시오.

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

클릭 한 후 버튼에서 커서를 멀리 이동하면 마지막 이벤트는 마우스 아웃이므로 클릭하든 아니든 상관없이 발생합니다.

클릭 할 때 마우스 아웃 효과를 피하려면 클릭 할 때 플래그를 설정하고 플래그가 설정된 경우 마우스 아웃 이벤트를 중단하십시오.

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를 사용하여 요소가 최선의 선택 일 것입니다. 그러나 이미 가지고있는 코드에 대한 빠른 수정을 원한다면 마우스 아웃 이벤트를 클릭 한 후에는 관찰을 중단 할 수 있습니다.

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