Как я обнаруживаю HTML5, перетаскивают ввод события, и отъезд окна, как Gmail делает?
Я хотел бы смочь выделить область отбрасывания, как только курсор, несущий файл, вводит окно браузера, точно способ, которым Gmail делает это. Но я не могу заставить его работать, и я чувствую, что просто пропускаю что-то действительно очевидное.
Я продолжаю пытаться сделать что-то вроде этого:
this.body = $('body').get(0)
this.body.addEventListener("dragenter", this.dragenter, true)
this.body.addEventListener("dragleave", this.dragleave, true)`
Но это запускает события каждый раз, когда курсор отодвигается и из элементов кроме ТЕЛА, которое имеет смысл, но абсолютно не работает. Я мог поместить элемент сверху всего, покрыв все окно и обнаружить на этом, но это будет ужасным способом пойти об этом.
Что я пропускаю?
1 ответ
Ваш третий аргумент для addEventListener равен true , что заставляет прослушиватель работать во время фазы захвата (см. http: // www.w3.org/TR/DOM-Level-3-Events/#event-flow для визуализации). Это означает, что он будет захватывать события, предназначенные для его потомков - и для тела, что означает все элементы на странице. В ваших обработчиках вам нужно будет проверить, является ли элемент, для которого они запускаются, самим телом. Я дам вам мой очень грязный способ сделать это. Если кто-нибудь знает более простой способ , который на самом деле сравнивает элементы , я бы хотел его увидеть.
this.dragenter = function() {
if ($('body').not(this).length != 0) return;
... functional code ...
}
Это находит тело и удаляет это из набора найденных элементов. Если набор не пустой, this не был телом, поэтому нам это не нравится и мы возвращаемся.Если this является телом , набор будет пустым, и код будет выполнен.
Вы можете попробовать простой if (this == $ ('body'). Get (0)) , но это, вероятно, потерпит неудачу.