문제 설명
마우스가 ID1로 이동하면 ID2가 표시되고 마우스가 ID1을 떠나면 ID2가 표시되기를 바랍니다. 질문은 다음과 같습니다.
1. 마우스가 ID1에서 ID2로 이동하면 ID가 디스플레이에서 표시되지 않게 변경 된 다음 디스플레이로 변경됩니다.
2. 마우스가 ID2에서 ID1로 이동하면 ID2의 표시가 비 디스플레이가되고 디스플레이가됩니다.
내가 원하는 것은 마우스가 ID1 또는 ID2에서 움직일 때 ID2가 변경하지 않고 계속 나타납니다.
<script type = "text/javaScript"src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript"> $ ( "#id1"). mouseOver (function () {$ (this) .children (). fadein (1000);}). 마우스 아웃 (function () {$ (this) .children (). Fadeout (1000);}); </screct>문제 해결책
초기 문제 분석은 마우스가 ID1에서 ID2로 이동했을 때, ID2에서 ID1로 남은 마우스가 ID1에 대해 마우스 아웃 이벤트가 트리거되어 ID2의 디스플레이가 비 디스플레이가되었다는 것이었다. 그런 다음 마우스가 ID2로 이동하고 ID2에서 마우스 오버 이벤트가 트리거되었습니다. 버블 메커니즘으로 인해 ID2의 마우스 오버가 ID1로 기포되기 전에, ID1의 마우스 오버 이벤트가 트리거 된 다음, ID2가 비 디스플레이에서 디스플레이로 변경되었습니다. 마찬가지로, 마우스가 ID2에서 ID1로 이동하면, ID2에 대한 마우스 아웃 이벤트가 트리거됩니다. 또는 마우스 아웃 이벤트가 ID1로 전송되는 버블 메커니즘 때문이며, ID2는 디스플레이에서 비 디스플레이로 변경됩니다. 그런 다음 마우스가 ID1로 이동하기 전에 마우스 오버 이벤트가 트리거되고 ID2가 표시되지 않습니다.
마우스가 ID1에서 ID2로 이동할 때 ID1에서 마우스를 차단하여 위의 문제를 해결 해야하는 것 같습니다. 마우스가 ID2에서 ID1로 이동할 때 ID2에서 ID2에서 ID1로의 마우스를 차단하여 ID2에서 ID2에서 ID1의 BUBBLED에서 마우스가 방지합니다. 그런 다음 거품을 방지하면 문제를 해결할 수 없습니다.
이러한 문제를 해결하기 위해 jQuery는 마우스 센터 및 마우셀 리브 방법을 제공합니다. 따라서 JS 코드는 다음으로 변경되어 문제를 잘 해결했습니다.
$ ( "#id1"). MouseEnter (function () {$ (this) .children (). fadein (1000);}). Mouseleave (function () {$ (this) .children (). fadeout (1000);});많은 장소에서 마우스 센터, 마우스 엘리브, 마우스 오버 및 마우스 아웃을 소개하므로 복사하여 붙여 넣었습니다.
/**********************************************/
1. 마우스 오버 및 마우스 센터
마우스 포인터가 선택된 요소 또는 하위 요소를 통과하는지 여부에 관계없이 마우스 오버 이벤트가 트리거됩니다.
마우스 포인터가 선택된 요소를 통과 할 때만 마우스 센터 이벤트가 트리거됩니다.
2. 마우스 아웃 및 마우스 엘리브
마우스 포인터가 선택된 요소 또는 하위 요소를 떠나는 지 여부에 관계없이 마우스 아웃 이벤트가 트리거됩니다.
마우스 포인터가 선택된 요소를 떠날 때만 Mouseleave 이벤트가 트리거됩니다.
/**********************************************/
현상은 실제로이 현상이지만 그 과정은 약간 모호합니다. 내 이해는 다음과 같습니다.
마우스 포인터가 선택된 요소로 이동하면 마우스 오버 이벤트가 트리거됩니다. 마우스 포인터가 선택된 요소에서 하위 요소로 이동하면 선택한 요소의 마우스 아웃 이벤트가 먼저 트리거 된 다음 하위 요소의 마우스 오버 이벤트가 선택된 요소로 버블 링된다는 것을 알고 있습니다. 현재 선택한 요소와 동일합니다. 먼저 마우스 아웃 이벤트를 실행 한 다음 마우스 오버 이벤트를 실행합니다.
확인하려면 코드를 다음과 같이 변경하십시오
<script type = "text/javaScript"src = "https://code.jquery.com/jquery-1.12.4.js"> </script> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript"> $ ( "#id1"). 마우스 오버 (function () {// $ (this) .children (). fadein (1000); console.log ( 'a');}). mouseout () {// $ (this) .children (). fadeout (1000);마우스를 페이지에서 ID1로 이동 한 다음 ID1에서 ID2로 이동하면 콘솔 출력은 다음과 같습니다.
ID1은 MouseOver, MouseOut 및 MouseOver 이벤트를 호출했으며 위에서 분석 한 것과 정확히 동일하다는 것을 알 수 있습니다.
마우스 센터 및 마우셀 리브 구현 분석
원칙 분석
위의 분석에서, 우리는 마우스가 선택된 요소에서 하위 요소로 이동할 때 마우스 센터 및 마우셀 리브의 효과를 달성하기 위해 선택된 요소가 마우스 아웃 이벤트를 실행하지 않으며, 하위 클래스 기포가되는 마우스 오버 이벤트를 실행하지 않는다는 것을 알 수 있습니다. 마우스가 선택된 요소 하위 요소에서 선택된 요소로 이동하면 선택한 요소는 마우스 오버 이벤트를 실행하지 않으며 서브 클래스가 기포하는 마우스 아웃 이벤트를 실행하지 않습니다.
위의 효과를 달성하려면 이벤트 객체와 관련된 속성이 필요합니다.이 객체는 마우스 오버 및 마우스 아웃 이벤트 대상 노드의 관련 노드의 속성을 판단하는 데 사용됩니다. 간단히 말해서, 마우스 오버 이벤트가 트리거되면 관련 타겟 속성은 마우스가 방금 왼쪽에있는 노드를 나타내며 마우스 아웃 이벤트가 트리거되면 마우스가 이동하는 객체를 나타냅니다. MSIE는이 속성을 지원하지 않으므로, 재산, 즉 Fromelement 및 Tolement를 대체했습니다. 또한 객체가 다른 객체에 포함되어 있는지 여부를 결정하는 포함 메소드도 필요합니다.
이런 식으로 마우스가 움직일 때 다음 두 가지를 판단해야합니다.
1. MALOUSEOVER에 전화하십시오. 관련 타겟이 선택한 요소의 자식 요소인지 확인하면됩니다. 그렇다면 (선택한 요소 하위 요소에서 선택한 요소로 이동할 때 마우스 오버가 실행되지 않으면, 선택된 요소에서 선택한 요소 하위 요소로 이동할 때, 버블 링 마우스 오버는 실행되지 않습니다).
2. 마우스 아웃에 전화하십시오. 관련 타겟의 자식 요소가 선택되었는지 여부 만 결정하면됩니다. 그렇다면 (선택한 요소 하위 요소에서 선택한 요소로 이동할 때, 자식 요소에서 버블 링 된 마우스 아웃이 실행되지 않으며, 선택한 요소에서 선택한 요소 하위 요소로 이동할 때 마우스 오버가 실행되지 않는다;
구현 프로세스
두 요소 사이에 포함 관계가 있는지 확인
함유 함수는 다음과 같이 jQuery로 캡슐화됩니다
다음으로 단순화 할 수 있습니다
// 두 A가 포함되어 있는지 여부를 판단하십시오 (A, B) {return A.Contains? a! = b && a.비교 문서 위치 소개
이 방법은 DOM 레벨 3 사양의 일부이며 2 개의 DOM 노드 사이의 상호 위치를 결정할 수 있습니다. 이 메소드는 .crontains ()보다 강력합니다. 이 방법의 가능한 적용 중 하나는 DOM 노드를 상세하고 정확한 순서로 정렬하는 것입니다. NODEA.comparedocumentPosition (NODEB)이 반환 한 정보는 다음과 같이 설명됩니다.
비트 번호 의미
위의 내용을 통해 A.comparedocumentPosition (B) 및 16으로 작성 해야하는 이유를 이해할 수 있습니다. 노드 A에 노드 B가 포함되면 16이 반환되고 16 & 16 = 1이 반환되고 결과는 다른 경우에는 0이됩니다.
호환성을 위해 관련 가득을 얻으십시오
다양한 브라우저와 호환 되려면 jQuery 소스 코드를 참조하고 다음 코드를 작성하여 마우스 오버 및 마우스 아웃 이벤트 대상 노드의 관련 특성을 얻으십시오.
함수 getRelated (e) {var related; var type = e.type.tolowercase (); // 여기에서 이벤트 이름을 여기에 가져옵니다. }마우스 오버 및 마우스 아웃을 개선하십시오
마우스 오버 및 마우스 아웃을 개선하여 개선 된 마우스 센터 및 마우셀 리브 효과를 달성하면 모든 코드는 다음과 같습니다.
<! docType html> <html> <head> <title> </title> </head> <body> <body> <div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript"src = "https://code.com/jquery-1.1.12. type = "text/javaScript"> // 두 개의 a가 bfunction을 포함하는지 여부를 판단합니다. a! = b && a.contains (b) : !! (a.comparedocumentPosition (b) & 16);} 함수 getRelated (e) {var relate; var type = e.type.tolowercase (); // 이벤트 이름을 여기에 가져옵니다. if (type = 'mouseout') {related = e.relatedTarget || e.to element} return related; } $ (function () {$ ( "#id1"). mouseover (function (e) {// 마우스가 id1 var related = getRelated (e)로 이동하는 곳을 방어합니다. // 관련된 경우 id2의 자식 요소 ID2 인 경우, ID1과 관련이 있거나 ID1에서 수행되지 않습니다. (this! = relation &&! contains (this, related)) {console.log ( 'mouseover');}}). 마우스 아웃 (함수 (e) {// 마우스가 id1에서 이동 해야하는 곳을 판단 하는가? 요소, 작업이 수행되지 않으면 (그렇지 않으면 해당 작업이 수행됩니다.다음 다이어그램에 표시된대로 테스트, 마우스 이동 경로
콘솔에서 볼 수 있듯이,이 순간 마우스 오버 및 마우스 아웃에는 완비 된 마우스 센터 및 마우스 엘리브 효과가 있습니다.
코드 캡슐화
이러한 작업을 수행 할 때마다 jQuery를로드하거나 많은 담당자를 작성 해야하는 경우 지루한 작업이됩니다. 향후 운영을 용이하게하기 위해 적절한 포장이 수행되고, jQuery를 시뮬레이션하고, 자신의 마우스 센터와 마우스 엘리브를 생성합니다. 코드는 다음과 같이 dqmouse.js 파일에 캡슐화됩니다.
(w) {var dqmouse = function (obj) {// 기능 본체는 new dqmouse.fn.init (obj);} dqmouse.fn = dqmouse.prototype = {// 확장 프로토 타입 객체 OBJ : null, "1.0.0", init : function (obj); 이;}, function (a, b) {return a.contains? a! = b && a. if (type == 'mouseover') {exeralate || e.fromelement} else if (type = 'mouseout') {e.RelatedTarget || e.toElement}}, Over : funct (fn) {varj = this.obj; var _self = this; var _ swelect (e). if (this! = related &&! _self.contains (this, relate)) {fn ();}} return _self;}, Out : Out (fn) {var obj = this.obj; var _self = this; e) {var related = _self.get (e); 관련)) {fn ();}} return _self;}} dqmouse.fn.init.prototype = dqmouse.fn; window.dqmouse = Window. $$ = dqmouse;}) (Window);호출되는 소스 파일은 다음과 같습니다.
<div id = "id1"> <div id = "id2"> </div> </div> <script type = "text/javaScript"src = "dqmouse.js"> </script> <script type = "text/javaScript"> var id1 = document.getElementById ( 'id1'); $$ (id1) .over (function () {console.log ( 'mouseover');}). Out (function () {console.log ( 'MouseOut');}); </스크립트>위는 편집자가 소개 한 JS에서 마우스 오버 및 마우스 아웃 문제를 여러 번 촉진하는 방법에 대한 관련 내용입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!