Прохождение клика через прозрачный div и беды jQuery hover

Question

Итак, у меня есть прозрачный div, который лежит поверх перетаскиваемого видео на YouTube.Пока видео на YouTube является перетаскиваемым, вы не можете приостановить / воспроизвести видео.Мое решение для этого - взять div размером с кнопки (внизу видео), и когда пользователь наводит курсор на него, объект больше не перетаскивается.Когда курсор уходит, объект теперь снова перетаскивается.Вы все еще можете нажать на большую часть видео, чтобы перетащить его.

Здесь указывается проблема:

Я использовал CSS pointer-events: none;, чтобы позволить клику перейти к видео.Однако, когда pointer-events:none;, jQuery не распознает mouseenter и предполагает, что мышь ушла, тем самым не позволяя мне щелкнуть (теперь) перетаскиваемый объект.

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

Есть идеи?

Редактировать: Есть идеи?Код не требуется.

Answer 1

Я думаю, было бы проще поместить один прозрачный div, охватывающий все, а затем самостоятельно обрабатывать перетаскивание видео, используя обработчики mousedown / move / up в прозрачном div, вместо того, чтобы выполнять всю эту хитрость для кнопок. Также намного легче поддерживать, если нужно изменить встроенный div.

Только будьте осторожны, чтобы IIRC Internet Explorer игнорировал события для полностью прозрачного div (!).

Answer 2

Это зависит от того, насколько вы контролируете механизм перетаскивания. Похоже, вы написали это. Если это так, вы делаете это задом наперед. Вместо того, чтобы блокировать область, которую вы не хотите перетаскивать, вам нужно включить область, которую вы хотите перетаскивать - или другими словами, вам нужно поместить div в область перетаскивания, чтобы он действовал как «ручка перетаскивания».

Я действительно не знаю, что еще ты можешь сделать. Вы можете разместить обработчики событий в окружающем DOM или даже в самой document.body, но это не поможет вам определить область перетаскивания и область без перетаскивания.

Если мое решение не работает для вас, вы должны проверить расположение мыши x / y. Да, это хлопотно и немного дорого, но вам иногда приходится делать такие вещи при работе с внешним сторонним кодом, который вы не можете контролировать, например, Flash.

Answer 3

Почему бы просто не сделать так, чтобы div, который накладывал видео на YouTube, вообще не закрывал кнопки?Таким образом, когда мышь перемещается из основного элемента «перетаскивания» для перехода к кнопкам, перетаскивание может прекратиться, и щелчок будет просто на самом элементе YouTube?