jquery 부모-자식창 마우스이벤트 질문요

Question

안녕하세요부모창, 자식창 공통소스에 mousemove 이벤트를 적용시켰습니다부모창->자식창 왔다갔다 하며 마우스를 움직이면 부모창에서만 인지하고 자식창에서 인지가 안 되는데요,부모창과 자식창에서 마우스이벤트를 동일하게 실행되게끔 하고싶습니다..관련해서 검색해봤는데 제가 원하는 것과 비슷해서 가져와 봤습니다.https://sciter.com/forums/topic/how-to-receive-mouse-events-outside-the-window/이 글처럼 jquery 혹은 javascript에서 처리할 수 있는 방법은 없을까요?방법을 못찾겠어서 도움좀 얻고 싶습니다.. 감사합니다.

앙칼라곤 · Answer

자식 창에서 부모 창과 동일한 마우스 이벤트를 실행시키기 위해서는 부모 창과 자식 창 간의 통신이 필요합니다. 이를 위해 window.postMessage를 사용하여 부모와 자식 창 간에 데이터를 주고받을 수 있습니다.부모 창 코드javascript// 부모 창에서 마우스 이동 이벤트$(document).mousemove(function(event) {console.log(&#34;부모 창에서 마우스 이동:&#34;, event.pageX, event.pageY);// 자식 창에 마우스 이벤트 정보 전송if (window.childWindow) {window.childWindow.postMessage({type: &#34;mousemove&#34;,pageX: event.pageX,pageY: event.pageY}, &#34;*&#34;);}});// 자식 창 열기 (필요 시 사용)function openChildWindow() {window.childWindow &#61; window.open(&#34;child.html&#34;, &#34;Child Window&#34;, &#34;width&#61;500,height&#61;500&#34;);}// 자식 창에서 보낸 메시지 처리window.addEventListener(&#34;message&#34;, function(event) {if (event.data.type &#61;&#61;&#61; &#34;mousemove&#34;) {console.log(&#34;자식 창에서 마우스 이동:&#34;, event.data.pageX, event.data.pageY);}}, false);자식 창 코드 (child.html)javascript// 자식 창에서 마우스 이동 이벤트$(document).mousemove(function(event) {console.log(&#34;자식 창에서 마우스 이동:&#34;, event.pageX, event.pageY);// 부모 창에 마우스 이벤트 정보 전송window.opener.postMessage({type: &#34;mousemove&#34;,pageX: event.pageX,pageY: event.pageY}, &#34;*&#34;);});// 부모 창에서 보낸 메시지 처리window.addEventListener(&#34;message&#34;, function(event) {if (event.data.type &#61;&#61;&#61; &#34;mousemove&#34;) {console.log(&#34;부모 창에서 마우스 이동:&#34;, event.data.pageX, event.data.pageY);}}, false);코드 설명부모 창 코드:$(document).mousemove()로 마우스 이동 이벤트를 감지하고, 이를 console.log로 출력합니다.자식 창이 열려 있다면, postMessage를 통해 자식 창에 마우스 이벤트 정보를 전송합니다.자식 창에서 postMessage로 받은 이벤트를 window.addEventListener(&#34;message&#34;)로 처리합니다.자식 창 코드:마찬가지로 $(document).mousemove()로 마우스 이동 이벤트를 감지하고, 이를 부모 창에 postMessage로 전송합니다.부모 창에서 보낸 메시지를 받아서 처리합니다.이렇게 하면 부모 창과 자식 창 간의 마우스 이벤트를 동기화할 수 있습니다. 이제 마우스가 부모 창과 자식 창을 오갈 때 각각의 창에서 마우스 이벤트를 동일하게 처리할 수 있습니다.

jquery 부모-자식창 마우스이벤트 질문요

1개의 답변

#jquery 목록