Question

我有以下代码：

if(text && spot && box) {
    document.getElementById('text-shadow-box').onmousemove = onMouseMove;

    document.getElementById('text-shadow-box').ontouchmove = function(e) {
        e.preventDefault();
        e.stopPropagation();

        onMouseMove({
            clientX: e.touches[0].clientX,
            clientY: e.touches[0].clientY
        });
    };
}

onmousemove = onMouseMove是什么？为什么一开始没有分配？我的另一个问题：上下文函数（e）和e.touches[0].clientx中的e是什么意思？

Answer 1

我将对内联代码进行评论：

//all variables ext,spot,box are defined, not "false" and not 0 and not null
if (ext && spot && box) {
/* We assign onmousemove event handler to the function, in javascript functions are vars
* function declared like `function function_name(param) {}` go to global scope, 
* and almost equal to 'function_name=function(param ) {}'
* var local scope use `var function_name=function(param) {}`
*/
            document.getElementById('text-shadow-box').onmousemove = onMouseMove;
/* add here is another example, you attach ontouchmove anonymous function,
* anonymous function BEGIN NEXT LINE */  
            document.getElementById('text-shadow-box').ontouchmove = function (e) {
 // e here it is event object, which passed to handler function as argument
 //it is jquery call, mean do not start other event handlers after this line
                e.preventDefault(); e.stopPropagation(); 
/* call function inMousemove, declared somewhere else
            The "{
                clientX: e.touches[0].clientX,
                clientY: e.touches[0].clientY
            }" here is object having two properties - clientX and clientY */
                onMouseMove({
                    clientX: e.touches[0].clientX,
                    clientY: e.touches[0].clientY
                });
/* anonymous function END NEXT LINE */
            };

<小时/> ontouchmove和其他触摸屏活动记录here 它看起来触摸是处理屏幕触摸的对象，因为我没有触摸屏设备我无法检查，但它看起来像触摸元素可以通过两种方式访问，第1次 - 使用e.touches.item(n)（如文档中所述）和第二次 - 使用e.touches作为数组e.touches[n]。 n == 0表示我从w3c规范中理解的第一个被触摸的元素。

event.stopPropagation（）

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

event.preventDefault（）

描述：如果调用此方法，则为事件的默认操作不会被触发。

所以event.stopPropagation()阻止该元素的任何父母接收该事件（假设你有两个折叠的div并且都有事件监听器）

虽然event.preventDefault()可以阻止默认操作（比如你有<a href="test.html"></a>并且有onclick事件处理程序，所以最好阻止使浏览器加载test.html的操作

Answer 2

onmousemove = onMouseMove用于HTML DOM事件注册。在这种情况下，它意味着当HTML元素'text-shadow-box'上有鼠标移动事件时，应该调用方法'onMouseMove'。

ontouchmove是另一个收听任何触摸移动的事件，这种情况发生在移动客户端（例如Android客户端）上。在事件处理程序中，它使用onMouseMove通过将触摸点转换为客户端坐标来处理此事件。

我第一次看javascript

2 个答案: