Rafael.js에서 마우스 아웃 이벤트가 발생하지 않습니다.

Question

Raphael.js를 사용하여 그린 모양이 여러 개인 경우 마우스를 굴릴 때 그림자를 추가하고 약간 확대해야합니다. 저는 Firefox와 Chrome에서 완벽하게 작동하지만 Internet Explorer에서는 mouseout 이벤트가 실행되지 않습니다.

이

내가 각 육각형 모양에 대해 가지고있는 마우스 오버 /로 마우스 코드 (육각는 라파엘 요소에 대한 참조입니다,이/_Promise 다른 것들 사이에 이벤트 정의하는 클래스에 대한 참조 인) :

this.hexagon.mouseover(function(){ 
     _Promise.hexagon.toFront(); 
     _Promise.hexagon.attr({ "transform": "...s" + scaleAmountOnRollover }); 
     _Promise.shadow = _Promise.hexagon.glow({ "width": 8, "opacity": 0.4 }); 
    }); 

    this.hexagon.mouseout(function(){ 
     _Promise.hexagon.attr({ "transform": "...s" + (1/scaleAmountOnRollover) }); 
     _Promise.shadow.remove(); 
    }); 

을

IE에서 (최대 버전 9 포함) mouseout 이벤트가 발생하지 않기 때문에 육각형 모양이 점점 더 커지고 있습니다. 거기에 몇 가지 console.log를 넣어서 이것이 확실한지 확인하십시오.

의견을 보내 주시면 감사하겠습니다.

Answer 1

IE에서 이벤트 버블 링 메커니즘이 다르므로 mouseover/mouseout 이벤트에 대한 불안정한 동작이 발생하지만 혁신 (예, 아직 IE를 사용 중입니다!)이 구제에 이릅니다.

일관된 동작을 위해 표준 mouseover 및 mouseout 대신 IE의 mouseenter 및 mouseleave을 사용할 수 있습니다. 물론 Raphaël의 API에서 물러나서 별도로 구현해야합니다 : 버전 6-8의 레거시 코드를 호출해야하므로 다른 이벤트 리스너를 바인딩하고 IE의 특정 이벤트 유형을 전달하고 attachEvent을 사용하거나 버전 9 이후는 addEventListener입니다.

이러한 IE 관련 이벤트에 대한 자세한 내용은 the quirksmode article on the subject에서 읽을 수 있습니다.

이 경우 jQuery를 사용하기를 원한다면 이미 API의 일부로 mouseleave을 제공하여이를 고려한 것입니다.