javascript - 如何在 JavaScript 中传输 'devicemotion' 属性？

Question

我有一个 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;

Answer 1

仅仅因为您将属性 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>

编辑:

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

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