В событии dragenter / dragover нет Event.fromElement?

Question

Я играл с перетаскиванием в полных формах (поэтому нет мгновенной загрузки). Я думал, что небольшая часть будет выделять определенный набор полей при наведении на файл. Введите dragover и dragenter события (и dragleave и т. Д.).

Оказывается, это не такая маленькая часть. Скрипка: http://jsfiddle.net/rudiedirkx/epp74/

Попробуйте: перетащите набор полей и немного подвигайтесь. Первый over вызывает событие dragenter набора полей (fieldset - желтый). Перемещение после этого (в пределах того же набора полей) вызывает dragenter s и dragleave s (fieldset не более желтого цвета), что плохо.

Именно поэтому я хотел сделать то, что IE сделал для mouseover и mouseout давным-давно: mouseenter и mouseleave (они запускаются только один раз). Для событий перетаскивания применяется та же самая вещь: они должны сработать только один раз точно таким же образом. Библиотеки JS подделывают эти события IE, используя Event.fromElement и Event.toElement (и сравнивают их с элементом владельца события). (Подробности см. В jQuery или Mootools .)

Чтобы сделать то же самое для событий перетаскивания, мне нужны те же fromElement и toElement. Вы можете видеть в скрипке, я пытаюсь, но я не могу их найти.

Кто-нибудь знает, где они? Почему они недоступны?

Я в основном использую Chrome, у которого нет fromElement в событии dragenter, но имеет с toElement в событии dragleave. В Firefox это немного хуже (но более логично): оба пусты.

Любые идеи приветствуются.

редактировать
После немного больше отладки Я обнаружил, что toElement в dragleave в Chrome не всегда верны. Он никогда не «больше», чем this, но иногда так и должно быть: когда я оставляю fieldset (this) в его родительской форме (toElement). Когда я это делаю, this и toElement - это набор полей (что неверно, верно?).

edit Solution:
В итоге получилось что-то вроде этого: http://jsfiddle.net/rudiedirkx/Lwd3md71/, которое игнорирует элементы в событии и использует координаты события, чтобы найти элемент под мышью. Чтобы заставить его срабатывать максимум один раз на кадр анимации, он использует requestAnimationframe, что приводит к 31-59 кадрам в секунду.

Answer 1

Firefox предоставляет свойство события relatedTarget, а Chrome и Safari - нет. К сожалению, эта проблема была открыта в течение нескольких лет, как эта ошибка Chrome и эта ошибка Webkit .

Answer 2

Существует способ подделать relatedTarget для события «dragleave», то есть установить переменную из сопутствующего события «dragenter» - поскольку dragleave всегда предшествует dragenter, переменная, заданная в последнем, будет доступнак первому:

var relatedTarget = null;

document.addEventListener('dragenter', function(e)
{
    relatedTarget = e.target;

}, false);
document.addEventListener('dragleave', function(e)
{
    console.log('target = ' + e.target + ' relatedTarget = ' + relatedTarget);

}, false);

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