Ответ на onmousemove событие за пределами окна браузера в IE

Question

Ответ на onmousemove событие за пределами окна браузера в IE

Ваш основной экземпляр Vue дублируется:

new Vue({
  el: '#app',
  render: h => h(App)
})

и:

const app = new Vue({
  router
}).$mount('#app')

Я думаю, что это является источником проблемы. Я полагаю, это может выглядеть так:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const Page1 = { template: '<div>Page1</div>' }
const Page2 = { template: '<div>Page2</div>' }

const routes = [
  { path: '/page1', component: Page1 },
  { path: '/page2', component: Page1 }
]

const router = new VueRouter({
  routes // short for `routes: routes`
})

const app = new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

26

javascript-events internet-explorer javascript

задан Community 19 July 2015 в 00:25

2 ответа

Вы можете посмотреть код здесь, поскольку он работает в IE8 и FF3.5. Если вы можете понять его код, отлично. http://www.walterzorn.de/en/dragdrop/dragdrop_e.htm

2

ответ дан 28 November 2019 в 06:31

Другие вопросы по тегам:

javascript-events internet-explorer javascript

Похожие вопросы:

score 66 · Accepted Answer

(Примечание: этот ответ относится исключительно к «стандартной» реализации перетаскивания mousedown -> mousemove -> mouseup. Он не применим к спецификации перетаскивания HTML5 ).

Разрешение перетаскивания за пределы окна браузера - старая проблема, которую разные браузеры решали двумя способами.

За исключением IE, когда пользователь инициирует операцию перетаскивания через mousedown, браузеры сделали что-то аккуратное (и это все только из наблюдения): своего рода машина состояний запускается для обработки особого случая движений мыши снаружи окно:

Пользователь запускает событие mousedown внутри document
Пользователь запускает событие mousemove. Событие срабатывает , даже когда оно запускается извне document (то есть из окна)
Пользователь запускает событие mouseup (внутри или снаружи document). События mousemove, инициированные извне документа , больше не запускают

IE и более старые версии Firefox [начиная с 2.0.20] не демонстрируют такое поведение. Перетаскивание за пределы окна просто не работает ^{1 .}

Проблема для IE и FF2 фактически заключается в том, является ли элемент «выбираемым» или нет (см. здесь и здесь ). Если реализация перетаскивания ничего не делает (тем самым позволяя выделение мышью), то указанная реализация не должна учитывать движения за пределами окна; браузер будет запускаться и запускать mousemove должным образом, и пользователю будет позволено свободно перемещаться за пределы окна. Ницца.

Однако, позволяя браузеру решать, что делать при перемещении мыши, вы получаете этот эффект, когда браузер думает, что пользователь пытается «выбрать» что-то (например, элемент), а не перемещает его, и продолжает отчаянно пытаться выделить элемент или текст в нем, когда мышь пересекает элемент во время перетаскивания.

Большинство реализаций перетаскивания, которые я видел, делают небольшую хитрость, чтобы сделать перетаскиваемый элемент «невыбираемым», тем самым получая полный контроль над mousemove для имитации перетаскивания:

elementToDrag.unselectable = "on";
elementToDrag.onselectstart = function(){return false};
elementToDrag.style.userSelect = "none"; // w3c standard
elementToDrag.style.MozUserSelect = "none"; // Firefox

Это хорошо работает, , но разрывает перетаскивание за пределы окна . ²

В любом случае , чтобы ответить на ваш вопрос, чтобы получить IE (все версии), позволяющие перетаскивать за пределы окна, используйте setCapture ] (и наоборот releaseCapture , когда мышь отпущена).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple drag demo</title>
<style>
#dragme {
  position:absolute;
  cursor:move;
  background:#eee;
  border:1px solid #333;
  padding:10px;
}
</style>

<script>
function makeDraggable(element) {

  /* Simple drag implementation */
  element.onmousedown = function(event) {

    document.onmousemove = function(event) {
      event = event || window.event;
      element.style.left = event.clientX + 'px';
      element.style.top = event.clientY + 'px';
    };

    document.onmouseup = function() {
      document.onmousemove = null;

      if(element.releaseCapture) { element.releaseCapture(); }
    };

    if(element.setCapture) { element.setCapture(); }
  };

  /* These 3 lines are helpful for the browser to not accidentally 
   * think the user is trying to "text select" the draggable object
   * when drag initiation happens on text nodes.
   * Unfortunately they also break draggability outside the window.
   */
  element.unselectable = "on";
  element.onselectstart = function(){return false};
  element.style.userSelect = element.style.MozUserSelect = "none";
}
</script>
</head>
<body onload="makeDraggable(document.getElementById('dragme'))">

<div id="dragme">Drag me (outside window)</div>

</body>
</html>

Демо можно увидеть здесь .

Это именно то, что делает Google Maps (как я обнаружил с тех пор, как разработал Google Maps в 2004 году, когда она была впервые выпущена).

^{1 _{Я полагаю, что на самом деле он разрывается только при запуске операции перетаскивания (т. е. mousedown) на текстовом узле. Узлы элементов / контейнеров не демонстрируют одинаковое поведение и могут перемещаться внутри или снаружи документа, если пользователь помещен в «пустую» часть элемента}}

^{2 _{Опять же, для инициации перетаскивания на текстовых узлах.}}