2015-09-29 4 views
2

У меня есть элемент DOM (в некоторых случаях несколько), который я хочу переместить (изменив css), когда устройство движется.Как передать свойство «devicemotion» в JavaScript?

Теперь мне интересно, почему это не работает:

var aDOMElement = document.getElementById("someId"); 
aDOMElement.DeviceMotionEvent = window.DeviceMotionEvent; 
aDOMElement.addEventListener('devicemotion', motionHandler, false); 

Я считаю обходной путь, чтобы просто работать с window объекта и обратного вызова я обрабатывать движения всех объектов, которые хранятся в массиве ,

Вроде как это:

function motionHandler(event) { 
    for (var obj in objectList) { 
     obj.move(event); 
    } 
} 

Однако, по какой-то причине, функция move I, присвоенный объекту перед сохранением его в списке undefined. Объяснения и/или решения для этого приветствуются.

EDIT:

Вот как я создать и добавить объект в массив:

var objectList = []; 

var elem = document.createElement("div"); 
//add some properties 
elem.id = "someId"; 
elem.move = specificMoveFunction; 
//add it to the list 
objectList[elem.id] = elem; 
+0

Можете ли вы показать 'objectList' и как вы добавляете объекты/добавляете' move'? – azium

+2

Кроме того, тип 'objectList' звучит как массив, поэтому вы должны использовать другой синтаксис итерации, например' objectList.forEach (function (obj) {obj.move (event)}) ' – azium

+0

Я добавил исправления. – Gandora

ответ

2

Просто потому, что вы назначаете свойство DeviceMotionEvent к DOM элемента не означает, что она будет У вас должен быть подключен прослушиватель событий в окне (где он уволен) к прослушивателю событий на элементах DOM и запускать их вручную. Тебе лучше слушать на мероприятии window и делать там свои манипуляции с DOM.

например.

window.addEventListener('devicemotion', function(event) { 
    var domElements = document.getElementsByClassName('could-move'); 
    for (i=0;i<elements.length;i++) { 
    elements[i].classList.add("moved"); 
    } 
}); 

, где ваш HTML, прежде чем будет выглядеть так:

<span class="could-move">span 1</span> 
<span class="could-move">span 2</span> 

и после того, как будет выглядеть

<span class="could-move moved">span 1</span> 
<span class="could-move moved">span 2</span> 

EDIT:

На самом деле, почему вы должны установить его из window на элемент DOM? можете ли вы не только aDOMElement.addEventListener('devicemotion', motionHandler, false); без aDOMElement.DeviceMotionEvent = window.DeviceMotionEvent;? Документы MDN не говорят, что это ТОЛЬКО срабатывает в окне.

EDIT II: все примеры показывают, что событие уволено только в окне: http://www.html5rocks.com/en/tutorials/device/orientation/, поэтому я по-прежнему считаю, что вам лучше слушать только окно и выполнять свою работу там.

+0

Вы ответили на мой первый вопрос, как указано здесь (посмотрите на цель): [link] (https://developer.mozilla.org/en-US/docs/Web/Events/devicemotion). Но я исправил свой код с предложением @azium. – Gandora

Смежные вопросы