IE 이외의 browsers_javascript 기술에 대한 mouseenter 및 mouseleave 이벤트에 대한 구현 코드 추가

먼저 몇 가지 이벤트 객체 속성을 이해하세요

target은 중첩된 요소의 가장 안쪽 수준에 있는 요소를 클릭하면 해당 요소가 대상입니다. IE6/7/8은 srcElement에 해당합니다.

currentTarget은 이벤트 핸들러가 추가된 요소 자체를 나타냅니다. 예를 들어 el.addEventListener에서는 el이 currentTarget입니다. IE6/7/8에는 해당 속성이 없습니다. 대신 evt.currentTarget = this와 같이 핸들러에서 이를 사용할 수 있습니다.

relativeTarget은 이벤트 관련 요소를 의미하며 일반적으로 mouseover 및 mouseout 이벤트에 사용됩니다. IE6/7/8의 해당 항목은 fromElement 및 toElement입니다.
mouseenter, mousleave는 IE9에서 계속 지원됩니다. Greg Reimer의 블로그 게시물 Goodbye mouseover, hello mouseenter도 참조하세요.
mouseenter와 mouseover의 차이점은 요소 내부에서 이동할 때 mouseenter가 실행되지 않는다는 것입니다. 다음과 같습니다

title>mouseerter 및 mouseover 차이(IE에서 테스트됨)

1, 마우스가 div 내부로 이동합니다. [id=parent1] 마우스 오버 이벤트도 실행됩니다

Child11

Child12

2, div[id=parent2]

="parent2" style= "width:400px;border:1px solid grey;padding:5px;">

Child22

>
알겠습니다 이 세 가지 속성의 의미를 보면 구현이 간단합니다.




코드 복사

코드는 다음과 같습니다. 다음과 같습니다:

E = function(){ function elContains(a, b){ try{ return a.contains ? a != b && a.contains (b) : !!(a.compareDocumentPosition (b) & 16); }catch(e){} } function addEvt(el, type, fn){

function fun( e){

var a = e .currentTarget, b = e.관련Target
if(!elContains(a, b) && a!=b){
fn.call(e.currentTarget,e );
}
}
if(el.addEventListener){
if(type=='mouseenter'){
el.addEventListener('mouseover', fun, false); 🎜>}else if(type==' mouseleave'){
el.addEventListener('mouseout', fun, false)
}else{
el.addEventListener(type, fn, false);
}
}else{
el.attachEvent('on' type, fn)
}
}
return {addEvt:addEvt}();


테스트 코드:







mouseerter와 mouseover의 차이점(IE에서 테스트)

1, div[id=parent1] 내부에서 마우스가 움직일 때도 마우스오버 이벤트가 발생합니다

어린이11

어린이12

2, div[id=parent2] 내부에서 마우스가 움직일 때 mouseenter 이벤트가 트리거되지 않습니다.

어린이21

어린이22

[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.

]