如何在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。解释 and/or 欢迎解决此问题。

编辑:

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

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 元素并不意味着它会被触发...您必须连接事件侦听器window （它被触发的地方）到 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 文档没有说这仅在 window.

上触发

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

如何在JavaScript中转移'devicemotion'属性？

How to transfer 'devicemotion' property in JavaScript?

html

javascript

devicemotion