微信小程序节点相关总结

bindtap、catchtap、bindclick的区别？

bindtap 手机端没响应，编辑器正常。pointer-events: none/auto;
如果在手机端使用 bind:tap 没有响应，但在编辑器中正常，可以尝试以下解决方法：

1. 检查事件绑定：确保事件正确绑定到元素上，且没有语法错误。
2. 确保没有阻止事件：检查是否有其他事件处理程序或 CSS 样式（如 pointer-events: none）阻止点击。
3. 调试日志：在事件处理函数中添加 console.log 语句，确认函数是否被调用。
4. 更新小程序基础库：确保使用的是最新版本的小程序基础库。
5. 重启设备：有时重启手机可以解决临时问题。
6. 检查网络：如果事件中有网络请求，确保网络正常。
7. 使用其他事件：尝试使用 bindclick 代替 bindtap 看是否有效。

bindclick 和 bindtap 的区别在于：

1. 触发方式：
   • bindclick：适用于鼠标点击（PC端）或长按后松开（移动端）。
   • bindtap：适用于快速触摸，通常用于移动端。
2. 事件响应：
   • bindclick：可能会有延迟。
   • bindtap：响应更快，适合快速交互。
3. 兼容性：
   • bindclick 更通用，适用于多种设备。
   • bindtap 更适合移动设备的触摸操作。
     总体来说，bindtap 更适合移动端的用户体验。

e.target和e.currentTarget

写了个嵌套层级的元素A-B，A上获取dataset的内容，事件写在A上，点击到内部的元素B的时候，e.target是B元素节点，e.currentTarget才是A节点，才有数据。
即事件源（target） 与 事件绑定元素（currentTarget） 的区别。

e.type

事件类型（如 tap、touchstart、change 等）。

e.timeStamp

事件触发的时间戳（毫秒）。

触摸事件属性（针对触摸类事件）

• touches
  当前屏幕上所有触摸点的信息（数组）。
  示例：

  console.log('当前触摸点:', e.touches); 
  // 输出: [{ identifier: 0, pageX: 100, pageY: 200 }]
  

• changedTouches
  触摸状态发生变化的触摸点信息（数组）。
  示例：

  console.log('变化的触摸点:', e.changedTouches); 
  // 输出: [{ identifier: 0, pageX: 100, pageY: 200 }]
  

• detail
  事件特定的额外信息（如 input 事件中的输入值）。
  示例：

  <input bindinput="onInput" />
  

  onInput(e) {
    console.log('输入值:', e.detail.value); // 输出用户输入的内容
  }
  

坐标信息

• pageX / pageY
  触摸点在整个页面中的坐标（相对于页面左上角）。
  示例：

  console.log('页面坐标:', e.pageX, e.pageY); // 输出: 100, 200
  

• clientX / clientY
  触摸点在当前视窗中的坐标（相对于视窗左上角）。
  示例：

  console.log('视窗坐标:', e.clientX, e.clientY); // 输出: 80, 150
  

事件绑定数据

• currentTarget.dataset
  绑定事件元素（bindtap 所在元素）的 data-* 属性。
  示例：

  <view data-id="123" bindtap="handleTap">view>
  

  handleTap(e) {
    console.log('数据ID:', e.currentTarget.dataset.id); // 输出: "123"
  }
  

冒泡与捕获相关

• bubbles
  事件是否冒泡（布尔值）。
  示例：

  console.log('是否冒泡:', e.bubbles); // 输出: true/false
  

• cancelable
  事件是否可以被取消（布尔值）。
  示例：

  console.log('是否可取消:', e.cancelable); // 输出: true/false
  

其他特殊属性

• target.id / currentTarget.id
  触发事件元素或绑定事件元素的 id 属性。
  示例：

  <view id="myView" bindtap="handleTap">view>
  

  handleTap(e) {
    console.log('元素ID:', e.currentTarget.id); // 输出: "myView"
  }
  

• target.dataset / currentTarget.dataset
  区分触发事件元素与绑定事件元素的 data-* 属性。
  示例：

  <view data-id="parent" bindtap="handleTap">
    <text data-id="child">点击我text>
  view>
  

  handleTap(e) {
    console.log('target数据:', e.target.dataset.id); // 可能输出: "child"
    console.log('currentTarget数据:', e.currentTarget.dataset.id); // 输出: "parent"
  }
  

常见事件类型及特有属性

事件类型	特有属性	说明
tap	-	点击事件
longpress	-	长按事件
touchstart	touches, changedTouches	触摸开始
touchmove	touches, changedTouches	触摸移动
touchend	touches, changedTouches	触摸结束
input	detail.value	输入框内容变化
change	detail.value	表单组件值变化（如 checkbox）
scroll	detail.scrollTop	滚动事件

总结

根据事件类型不同，可获取的属性也有所差异。在处理事件时，建议：

1. 优先使用 currentTarget 获取绑定事件元素的数据。
2. 通过 detail 获取特定事件的额外信息（如输入值、滚动位置）。
3. 利用坐标属性（pageX、clientX）实现交互效果（如拖拽）。

示例代码：

handleEvent(e) {
  console.log('事件信息汇总：');
  console.log('类型:', e.type);
  console.log('坐标:', e.pageX, e.pageY);
  console.log('数据:', e.currentTarget.dataset);
  console.log('额外信息:', e.detail);
}