Обнаружить движение мыши, когда над фреймом?

Question

У меня есть iframe, который занимает все окно (100% в ширину, 100% в высоту), и мне нужно, чтобы главное окно могло определить, когда мышь была перемещена.onMouseMove атрибут в iframe, и он явно не работает.Также попытался обернуть iframe в div следующим образом:

<div onmousemove="alert('justfortesting');"><iframe src="foo.bar"></iframe></div>

.. и это не сработало.Есть предложения?

Answer 1

Если ваша цель не Opera 9 или ниже и IE 9 или ниже, вы можете использовать атрибут css pointer-events: none.

Я нашел лучший способ просто игнорировать iframe. Я добавляю класс с этим атрибутом в iframe в событии onMouseDown и удаляю в событии onMouseUp.

Прекрасно работает для меня.

Answer 2

Iframes захватывают события мыши, но вы можете перенести события в родительскую область, если междоменная политика удовлетворена. Вот как это сделать:

// This example assumes execution from the parent of the the iframe

function bubbleIframeMouseMove(iframe){
    // Save any previous onmousemove handler
    var existingOnMouseMove = iframe.contentWindow.onmousemove;

    // Attach a new onmousemove listener
    iframe.contentWindow.onmousemove = function(e){
        // Fire any existing onmousemove listener 
        if(existingOnMouseMove) existingOnMouseMove(e);

        // Create a new event for the this window
        var evt = document.createEvent("MouseEvents");

        // We'll need this to offset the mouse move appropriately
        var boundingClientRect = iframe.getBoundingClientRect();

        // Initialize the event, copying exiting event values
        // for the most part
        evt.initMouseEvent( 
            "mousemove", 
            true, // bubbles
            false, // not cancelable 
            window,
            e.detail,
            e.screenX,
            e.screenY, 
            e.clientX + boundingClientRect.left, 
            e.clientY + boundingClientRect.top, 
            e.ctrlKey, 
            e.altKey,
            e.shiftKey, 
            e.metaKey,
            e.button, 
            null // no related element
        );

        // Dispatch the mousemove event on the iframe element
        iframe.dispatchEvent(evt);
    };
}

// Get the iframe element we want to track mouse movements on
var myIframe = document.getElementById("myIframe");

// Run it through the function to setup bubbling
bubbleIframeMouseMove(myIframe);

Теперь вы можете прослушивать указатель мыши на элементе iframe или на любом из его родительских элементов - событие будет всплывать, как и следовало ожидать.

Это совместимо с современными браузерами. Если вам нужно, чтобы он работал с IE8 и ниже, вам нужно использовать специфичные для IE замены createEvent, initMouseEvent и dispatchEvent.

.

Answer 3

Страница внутри вашего iframe является полным документом. Он будет использовать все события и не будет иметь непосредственного соединения с родительским документом.

Вам нужно будет перехватить события мыши из javascript внутри дочернего документа, а затем как-то передать это родителю.

Answer 4

MouseEvent.initMouseEvent() устарела, поэтому ответ @ Ozan немного устарел. В качестве альтернативы тому, что предусмотрено в его ответе, я сейчас делаю это так:

var bubbleIframeMouseMove = function( iframe ){

    iframe.contentWindow.addEventListener('mousemove', function( event ) {
        var boundingClientRect = iframe.getBoundingClientRect();

        var evt = new CustomEvent( 'mousemove', {bubbles: true, cancelable: false})
        evt.clientX = event.clientX + boundingClientRect.left;
        evt.clientY = event.clientY + boundingClientRect.top;

        iframe.dispatchEvent( evt );

    });

};

Где я устанавливаю clientX & clientY, вы захотите передать любую информацию из события окна контента в событие, которое мы отправим (т. Е. Если вам нужно передать что-то вроде screenX / screenY, сделай это там).

Answer 5

В вашем «родительском» фрейме выберите свой «дочерний» фрейм и определите интересующее вас событие, в вашем случае mousemove

Это пример кода, который будет использоваться в вашем "родительском" фрейме

document.getElementById('yourIFrameHere').contentDocument.addEventListener('mousemove', function (event) {
                console.log(, event.pageX, event.pageY, event.target.id);
            }.bind(this));

Answer 6

Другой способ решить эту проблему, который мне подходит, - отключить события перемещения мыши на iframe(s) с помощью чего-то вроде mouse down:

$('iframe').css('pointer-events', 'none');

, а затем снова включите события перемещения мыши на iframe(s) на mouse up:

$('iframe').css('pointer-events', 'auto');

Я попробовал некоторые другие подходы, описанные выше, и они работают, но, похоже, это самый простой подход.

Кредит: https://www.gyrocode.com/articles/how-to-detect-mousemove-event-over-iframe-element/

Answer 7

Я столкнулся с похожей проблемой, когда у меня были div, которые я хотел перетащить через iFrame. Проблема заключалась в том, что если указатель мыши переместился за пределы div, на iFrame, события перемещения мыши были потеряны, и div перестал перетаскивать. Если это именно то, что вы хотите сделать (в отличие от простого обнаружения пользователя, машущего мышкой над iFrame), я нашел предложение в другой ветке вопросов , которая, кажется, работает хорошо, когда я пытался это сделать. .

На странице, которая содержит объекты, которые вы хотите перетащить, также добавьте:

<div class="dragSurface" id="dragSurface">
<!-- to capture mouse-moves over the iframe-->
</div>

Установите его первоначальный стиль так:

.dragSurface
{
  background-image: url('../Images/AlmostTransparent.png');
  position: absolute;
  z-index: 98;
  width: 100%;
  visibility: hidden;
}

Z-индекс '98' связан с тем, что я установил для div, который я хочу перетащить, значение z-index: 99, а для iFrame - z-index: 0.

Когда вы обнаружите mousedown в перетаскиваемом объекте (не div divSurface), вызовите следующую функцию как часть вашего обработчика событий:

function activateDragSurface ( surfaceId )
{
  var surface = document.getElementById( surfaceId );
  if ( surface == null ) return;

  if ( typeof window.innerWidth != 'undefined' )
  { viewportheight = window.innerHeight; } 
  else
  { viewportheight = document.documentElement.clientHeight; }

  if ( ( viewportheight > document.body.parentNode.scrollHeight ) && ( viewportheight > document.body.parentNode.clientHeight ) )
  { surface_height = viewportheight; }
  else
  {
    if ( document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight )
    { surface_height = document.body.parentNode.clientHeight; }
    else
    { surface_height = document.body.parentNode.scrollHeight; }
  }

  var surface = document.getElementById( surfaceId );
  surface.style.height = surface_height + 'px';
  surface.style.visibility = "visible";
}

Примечание: большую часть этого я извлек из чужого кода, который нашел в Интернете! Большая часть логики заключается в том, чтобы просто установить размер dragSurface для заполнения фрейма.

Так, например, мой обработчик onmousedown выглядит так:

function dragBegin(elt)
{
  if ( document.body.onmousemove == null )
  {
    dragOffX = ( event.pageX - elt.offsetLeft );
    dragOffY = ( event.pageY - elt.offsetTop );
    document.body.onmousemove = function () { dragTrack( elt ) };
    activateDragSurface( "dragSurface" ); // capture mousemoves over the iframe.
  }
}

Когда перетаскивание останавливается, ваш обработчик onmouseup должен включать вызов этого кода:

function deactivateDragSurface( surfaceId )
{
  var surface = document.getElementById( surfaceId );
  if ( surface != null ) surface.style.visibility = "hidden";
}

Наконец, вы создаете фоновое изображение (в моем примере - почтиTransparent.png) и делаете все, кроме полностью прозрачным. Я сделал изображение 8х8 с альфа = 2.

Я тестировал это только в Chrome . Мне нужно, чтобы он работал и в IE, и я постараюсь обновить этот ответ тем, что я там обнаружил!

Answer 8

<script>
// dispatch events to the iframe from its container
$("body").on('click mouseup mousedown touchend touchstart touchmove mousewheel', function(e) {
    var doc = $("#targetFrame")[0].contentWindow.document,
        ev = doc.createEvent('Event');
    ev.initEvent(e.originalEvent.type, true, false);
    for (var key in e.originalEvent) {
        // we dont wanna clone target and we are not able to access "private members" of the cloned event.
        if (key[0] == key[0].toLowerCase() && $.inArray(key, ['__proto__', 'srcElement', 'target', 'toElement']) == -1) {
            ev[key] = e.originalEvent[key];
        }
    }
    doc.dispatchEvent(ev);
});
</script>
<body>
<iframe id="targetFrame" src="eventlistener.html"></iframe>
</body>

Answer 9

Я нашел относительно простое решение для аналогичной проблемы, которая возникла у меня, когда я хотел изменить размер фрейма iframe и long с div, сидящим рядом с ним. При наведении мыши на iframe jquery перестанет обнаруживать мышь.

Чтобы исправить это, у меня был div, сидящий с iframe, заполняющими одну и ту же область одинаковыми стилями, за исключением z-индекса div (установленного в 0) и iframe (установленного в 1). Это позволило использовать iframe в обычном режиме без изменения размера.

<div id="frameOverlay"></div>  
<iframe></iframe>

При изменении размера div z-index устанавливается равным 2, а затем возвращается к 0. Это означало, что iframe все еще был виден, но наложение блокировало его, позволяя обнаружить мышь.

Answer 10

Вы можете добавить оверлей поверх iframe, когда начинается перетаскивание (событие onmousedown), и удалять его, когда заканчивается перетаскивание (при событии mouserup). плагин jquery UI.layout использует этот метод для решения этой проблемы.