未带console或math前缀的log()用法？MDN触摸事件代码咨询

我来帮你逐个解答这两个问题：

浏览器和Node.js的默认全局环境里并没有内置的log()函数，直接调用会抛出ReferenceError: log is not defined错误。如果想不用前缀直接用log()，有两种实用方式：

• 手动定义全局的log()函数，把它映射到console.log：

  // 定义全局log函数，支持任意数量的参数
  function log(...args) {
    console.log(...args);
  }
  
  // 之后就能直接调用了
  log("测试内容");
  log("多个参数", 123, { key: "value" });
  

• 如果你是在特定框架或自定义运行环境中使用，可能环境已经预先定义了全局log()，这时直接参考对应环境的文档调用即可——但通用环境下必须自己定义或者使用完整的console.log()。

先把你的代码补全并优化，同时讲解触摸事件的核心要点，方便你理解和扩展：

完整可运行代码 #

HTML部分

<canvas id="canvas" width="600" height="600" style="border:solid black 1px;">
  Your browser does not support canvas element.
</canvas>
<br>
<button onclick="startup()">Initialize</button>
<br>
Log: <pre id="log" style="border: 1px solid #ccc; padding: 8px; height: 200px; overflow-y: auto;"></pre>

JavaScript部分

function startup() {
  const canvas = document.getElementById('canvas');
  const logElement = document.getElementById('log');

  // 辅助函数：添加日志到页面，带时间戳
  function addLog(message) {
    logElement.textContent += `${new Date().toLocaleTimeString()} - ${message}\n`;
    // 自动滚动到最新日志位置
    logElement.scrollTop = logElement.scrollHeight;
  }

  // 触摸开始事件：手指刚接触屏幕时触发
  canvas.addEventListener('touchstart', (e) => {
    e.preventDefault(); // 阻止默认行为（比如页面滚动、缩放）
    const firstTouch = e.touches[0]; // 获取第一个触摸点
    addLog(`触摸开始：坐标 (${firstTouch.clientX}, ${firstTouch.clientY})`);
    
    // 如果需要在canvas上绘制，这里可以初始化路径
    // const ctx = canvas.getContext('2d');
    // ctx.beginPath();
    // ctx.moveTo(firstTouch.clientX, firstTouch.clientY);
  });

  // 触摸移动事件：手指在屏幕上滑动时持续触发
  canvas.addEventListener('touchmove', (e) => {
    e.preventDefault();
    const firstTouch = e.touches[0];
    addLog(`触摸移动：坐标 (${firstTouch.clientX}, ${firstTouch.clientY})`);
    
    // 绘制滑动轨迹
    // const ctx = canvas.getContext('2d');
    // ctx.lineTo(firstTouch.clientX, firstTouch.clientY);
    // ctx.stroke();
  });

  // 触摸结束事件：手指离开屏幕时触发
  canvas.addEventListener('touchend', () => {
    addLog('触摸结束');
  });

  // 触摸取消事件：触摸被意外中断时触发（比如弹出弹窗、电话接入）
  canvas.addEventListener('touchcancel', () => {
    addLog('触摸被取消');
  });

  addLog('触摸事件监听器已初始化完成！');
}

关键知识点详解 #

• 触摸事件对象核心属性：
  • e.touches：当前屏幕上所有活跃触摸点的列表（支持多点触摸）
  • e.targetTouches：当前绑定事件的元素（这里是canvas）上的触摸点列表
  • e.changedTouches：本次事件中状态发生变化的触摸点列表（比如touchend时，这里包含离开的触摸点）
• 阻止默认行为：e.preventDefault()是必须的，否则触摸操作会触发页面滚动、缩放等默认行为，干扰canvas的交互
• 多点触摸支持：如果需要处理多个手指的操作，可以遍历e.touches数组，每个触摸点的identifier属性可以用来区分不同的手指
• 兼容性：现代移动端浏览器和支持触摸的桌面浏览器都原生支持触摸事件，无需额外兼容处理

内容的提问来源于stack exchange，提问作者rpivovar