События мыши с дочерним Ифраме

Question

У меня проблема с mousemove (и другими видами мышиных событий) и дочерним iframe.

Когда я нажимаю на iframe, а затем перетаскиваю мышь над основным кадром, событие mousemove основного кадра просто не срабатывает.

Я пытался передать события родителю (но так я не могу получить event.target)

Я пытался использовать HTML5 DND, но есть проблема с производительностью. Работает хорошо, но генерирует странные HitTests (в chrome).

В идеале я хочу сделать это с помощью mousedown + mousemove.

Я сделал простую демонстрацию этой проблемы здесь

var frame = document.getElementById("frame");

var frameBody = frame.contentDocument.documentElement.getElementsByTagName("body")[0];
frameBody.innerHTML = "CLICK HERE AND DRAG OVER THE BOXES TO SEE THE PROBLEM. Why parent's listener makes nothing?";


frame.contentDocument.addEventListener("mousedown", function(e) {
    console.log("frame mousedown");
})



document.addEventListener("mousemove", function(event) {

    // I need it working here with all event properties like event.target of the main fame
    console.log("main move");
  var resultBox = document.getElementById("result");
  if (event.target.id)  resultBox.innerHTML = event.target.id;
})

Answer 1

Это решает проблему.

http://jsfiddle.net/xr1f03do/33/

frame.contentDocument.addEventListener("mousedown", function(e) {
    e.preventDefault();
    console.log("frame mousedown");
})