Question

我是一名Flex / Actionscript难民，并尝试使用JS / HTML5 / CSS3。有些事情立即有意义，但有些事情却没有。

我正在看这个JSfiddle "Pure Javascript Draggable"，我不理解这一行（或者更确切地说，我理解它在做什么但不知道它是怎么做的）

    x_pos = document.all ? window.event.clientX : e.pageX;

我查了“document.all”，它似乎是没有参数的Element.querySelectorAll()的简写？

返回源自该元素的所有元素的非实时NodeList 调用它与指定的CSS组匹配选择器。

这是对的吗？那么“all”参数意味着它将返回DOM中的所有内容？
“非实时”NodeList是什么意思？ “非实时”？
实际的行是...测试window.event.clientX或e.pageX是否为非null？

基本的东西，但令人困惑。

var selected = null, // Object of the element to be moved
    x_pos = 0, y_pos = 0, // Stores x & y coordinates of the mouse pointer
    x_elem = 0, y_elem = 0; // Stores top, left values (edge) of the element

// Will be called when user starts dragging an element
function _drag_init(elem) {
    // Store the object of the element which needs to be moved
    selected = elem;
    x_elem = x_pos - selected.offsetLeft;
    y_elem = y_pos - selected.offsetTop;
}

// Will be called when user dragging an element
function _move_elem(e) {
    x_pos = document.all ? window.event.clientX : e.pageX;
    y_pos = document.all ? window.event.clientY : e.pageY;
    if (selected !== null) {
        selected.style.left = (x_pos - x_elem) + 'px';
        selected.style.top = (y_pos - y_elem) + 'px';
    }
}

// Destroy the object when we are done
function _destroy() {
    selected = null;
}

// Bind the functions...
document.getElementById('draggable-element').onmousedown = function () {
    _drag_init(this);
    return false;
};

document.onmousemove = _move_elem;
document.onmouseup = _destroy;

Answer 1

这是对的吗？所以＆＃34;所有＆＃34; param意味着它返回DOM中的所有内容？

是。页面中的每一个元素都放在一个类似于数组的一维结构中并交给你。

＆＃34;非生活＆＃34; NodeList是什么意思？＆＃34;非活＆＃34;

NodeLists can be live or non-live。实时NodeList意味着当相关DOM发生变化时数组元素会发生变化（即：如果我从DOM中删除了<a>，则收集所有<a> s的实时NodeList将会神奇地丢失一个元素。一个不活的很好......一个没有改变的。（即：如果我从DOM中删除了<a>，则收集所有<a>的非实时NodeList仍会引用已删除的<a>。

实际的行是...测试window.event.clientX或e.pageX是否为非null？

document.all可能正在使用to check what browser is being used。在这种情况下，它会检查要使用的事件对象，无论是全局事件还是本地事件。

Answer 2

的document.all？

正在检查方法是否存在（三元内部分配）

＆＃34;非生活＆＃34; NodeList是什么意思？＆＃34;非活＆＃34;

意味着如果您对检索到的nodeList的项目执行操作会影响nodeList，那么您将确保列表不会发生变化;
（典型的例子是通过classname选择然后更改类名）;
如果您从getElementsByClassName获取了列表，则列表会立即更新，从而影响列表。

在你的示例脚本中说你永远不会使用querySelectorAll（），

引用尖锐的评论

＆＃39; document.all是旧的Microsoft IE。它基本上是一种检测代码在Internet Explorer中运行的（坏）方式。＆＃39;

这个“document.all”行是做什么的？

2 个答案: