2010-04-13 3 views
2

Dojo 연결을 onmouseoveronmouseout으로 설정 한 다음 마우스 오버시 컨텐츠를 추가하면 Dojo는 새 컨텐츠가 있으므로 onmouseout 이벤트를 한 번에 실행합니다. 예 : dojo connect mouseover and mouseout

dojo.query(".star").parent().connect("onmouseover", function() { 
    dojo.query("span", this).addContent("<img src='star-hover.jpg'>"); 
}).connect("onmouseout", function() { 
    dojo.destroy(dojo.query("img", this)[0]); 
}); 

parent()

<td>이고 .star이 범위이다. 사용자가 표 셀을 가리킬 때마다 호버 이미지를 추가하고 싶습니다. 그것은 커서가 이미지를 가리 키지 않는 한 작동합니다. 이는 심각한 깜박임을 초래할 수 있기 때문입니다. 이게 신중한가요? 그리고 그 주위에 방법이 있습니까?

편집 : (. 나는 그것이 작동 할 것으로 예상 이상으로) 그냥 jQuery로 비슷한을 시도하고 그것이 예상대로 작동

$(".star").parent().hover(function() { 
    $("span", this).append("<img src='star-hover.jpg'>"); 
}, function() { 
    $("img", this).remove(); 
}); 

이 유혹 할 때 이미지를 표시, 만 제거합니다 커서를 표 셀 바깥으로 이동할 때

+0

나는 처음부터 모든 span.star 노드 내부에 이미지를 갖고 싶습니다. 마우스가 끝났을 때 '.hovered'클래스를 노드에 추가하고 span.star 내부 이미지를 표시하는 CSS 규칙을 추가하십시오. 아래에 'td.hovered'. – Kniganapolke

+0

물론, 호버 상태에 요소를 추가하려는 경우가 있습니다. 그리고 분명히 이것은 올바른 행동이 될 수없는 것입니까? – peirix

답변

5

예에서 jQuery와 함께 작동하는 이유는 .hover가 정규화 된 onmouseenter/onmouseleave 이벤트를 사용하기 때문입니다. 연결하려는 경우 Dojo에서 예상대로 작동합니다. 또한, 도장에 대한 .hover의 시뮬레이션은 다음과 같습니다 그런

dojo.NodeList.prototype.hover = function(over, out){ 
    return this.onmouseenter(over).onmouseleave(out || over); 
} 

당신은 좋겠 : mouseeneter와 마우스 오버 사이

dojo.query("...").hover(function(e){ .. }, function(e){ .. }); 

의 차이는 왜 발사 onmouseout 즉시의 행동을보고있다된다 .