2

我有一个 DOM 元素（在某些情况下是几个），我想在设备移动时移动（通过更改 css）。

现在，我想知道为什么这不起作用：

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我在将对象存储到列表之前分配给它的函数是undefined. 欢迎对此进行解释和/或解决方案。

编辑：

以下是我创建对象并将其添加到数组的方法：

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;
4

1 回答 1

2

仅仅因为您将属性分配给DeviceMotionEventDOM 元素并不意味着它将被触发......您必须将窗口（触发它的位置）上的事件侦听器连接到 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>

编辑：

实际上，为什么需要将其设置window为 DOM 元素？你可以不只是aDOMElement.addEventListener('devicemotion', motionHandler, false);没有aDOMElement.DeviceMotionEvent = window.DeviceMotionEvent;吗？MDN 文档并没有说这仅在窗口上触发。

编辑二：示例都显示事件仅在窗口上触发：http: //www.html5rocks.com/en/tutorials/device/orientation/所以我仍然认为你最好只在窗口上听并做你的在那里工作。

于 2015-09-29T15:26:28.643 回答