iframe 안에서 마우스 이벤트를 잃어버리는 현상 수정

레이어 팝업을 띄운 상태에서 레이어 팝업을 resize 할 때 마우스를 드래그하다가 다른 레이어 팝업의 iframe 안으로 마우스를 이동하게 되면 마우스 이벤트를 잃어버리고 드래그가 안되는 현상이 발생한다.

이 문제를 어떻게 해결해야 되나 고민하고 있었는데,

iframe 태그에서 다음과 같이 style 옵션을 주는 것으로 해결된다.

pointer-events: none;

[출처] https://stackoverflow.com/questions/5261328/receive-mousemove-events-from-iframe-too

Receive mousemove events from iframe, too

I have a javascript app, whichs adds a mousemove listener to the document. Problem: When the mouse is moved over an iframe, the function is NOT called.

Is there a way to pass through such events to the root document?

Put pointer-events: none; in the styles for the frame.

I was having this problem myself and found this solution works great and is so simple!

그런데 이렇게 하면 iframe 태그 안에서 일어나는 마우스 이벤트가 모두 안 먹는다.

마우스 클릭, 마우스 오버 등.

그래서 다음과 같이 해 보려고 했으나,

[참고] https://www.gyrocode.com/articles/how-to-detect-mousemove-event-over-iframe-element/

$('#draggable').draggable({
   start: function(){
      // Temporarily disable mouse events for IFRAME for smooth dragging
      $('#draggable iframe').css('pointer-events', 'none');
   },
   stop: function(){
      // Re-enable mouse events for IFRAME
      $('#draggable iframe').css('pointer-events', 'auto');
   }
});

레이어 팝업창을 움직일 때, 팝업창의 크기가 비정상적으로 동작하는 버그가 발생했다.

그래서 다음과 같이 해결.

You should look through combining parent document event binding withdocument.getElementById('iFrameId').contentDocument event, witch allows you to get access to iFrame content elements.

https://stackoverflow.com/a/38442439/2768917

function bindIFrameMousemove(iframe){
    iframe.contentWindow.addEventListener('mousemove', function(event) {
        var clRect = iframe.getBoundingClientRect();
        var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

        evt.clientX = event.clientX + clRect.left;
        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);
    });
};

bindIFrameMousemove(document.getElementById('iFrameId'));

[참고] https://stackoverflow.com/questions/5261328/receive-mousemove-events-from-iframe-too

내가 짠 코드는 아래와 같다.

function bindIFrameEvent(iframe){

// popup을 resize 하기 위해 drag할 때, Mouse 이벤트를 잃어버리는 현상을 없애주는 코드.

    iframe.contentWindow.addEventListener('mousemove', function(event) {

        var clRect = iframe.getBoundingClientRect();

        var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

        evt.clientX = event.clientX + clRect.left;

        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);

    });

    // iframe 안을 클릭했을 때, 해당 popup 창을 Click 한 것과 같은 효과를 준다.

    iframe.contentWindow.addEventListener('click', function(event) {

    var evt = new CustomEvent('click', {bubbles: true, cancelable: false});

    var popupwindow = $(iframe).closest('.popupwindow').get(0);

    popupwindow.dispatchEvent(evt);

    });

    // dragging 하다가 mouse button을 up 하는 이벤트를 iframe 밖으로 전달.

    iframe.contentWindow.addEventListener('mouseup', function(event) {

        var clRect = iframe.getBoundingClientRect();

        var evt = new CustomEvent('mouseup', {bubbles: true, cancelable: false});

        evt.clientX = event.clientX + clRect.left;

        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);

    });

};