微信小程序节点相关总结

微信小程序节点事件总结

  • bindtap、catchtap、bindclick的区别?
    • `bindclick` 和 `bindtap` 的区别在于:
  • e.target和e.currentTarget
  • e.type
  • e.timeStamp
  • 触摸事件属性(针对触摸类事件)
  • 坐标信息
  • 事件绑定数据
  • 冒泡与捕获相关
  • 其他特殊属性
      • **常见事件类型及特有属性**
  • **总结**

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 看是否有效。

bindclickbindtap 的区别在于:

  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

事件类型(如 taptouchstartchange 等)。

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-长按事件
touchstarttouches, changedTouches触摸开始
touchmovetouches, changedTouches触摸移动
touchendtouches, changedTouches触摸结束
inputdetail.value输入框内容变化
changedetail.value表单组件值变化(如 checkbox
scrolldetail.scrollTop滚动事件

总结

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

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

示例代码:

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.tpcf.cn/diannao/88394.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

XSD是什么,与XML关系

XSD&#xff08;XML Schema Definition&#xff09;是用于描述XML文档结构和内容的一种规范。它定义了XML文档中元素、属性、数据类型、数据格式以及它们之间的关系和约束。XSD是W3C&#xff08;万维网联盟&#xff09;推荐的标准之一&#xff0c;它比早期的DTD&#xff08;Doc…

Ubuntu服务器中MySQL如何进行主从复制

一、MySQL 主从复制基本原理 MySQL 主从复制是指&#xff1a;一台数据库服务器负责写入操作&#xff0c;并将数据变更以二进制日志形式记录下来;一台或多台从库通过读取主库的二进制日志&#xff0c;实时或半实时地将主库的写入操作同步到自身数据库&#xff0c;实现数据一致性…

Android图形系统框架解析

前言 Android图形系统对于开发者来说可能会比较难以理解&#xff0c;因为涉及的东西可能会计较多&#xff0c;比如Android自己的图形系统。OpenGL&#xff0c;视频编解码器&#xff0c;SurfaceFlinger&#xff0c;FrameBuffer等等。下面我们结合官方文档&#xff0c;介绍一下图…

AI智能巡检系统给烘焙店开的「减损药方」 InfiSight智睿视界

01 食材浪费&#xff1a;甜蜜产业的苦涩成本 后厨操作台上&#xff0c;刚过最佳赏味期的可颂成批倒入垃圾桶——这是烘焙店最隐秘的痛。现烤现售模式虽保障新鲜度&#xff0c;却让原料管理沦为盲区&#xff1a; 销售数据≠生产指南&#xff1a;总部无法感知门店实时库存 …

工具 | vscode 发出声音,如何关闭

设置->搜 accessibility -> Accessibility Support -> 自动 改为 off 设置->搜 volume -> 0 设置->搜 sound -> 辅助功能信号 -> sound的 自动 改为 off 参考&#xff1a; How to turn off (or on) sounds from Visual Studio Code? - Stack Ove…

Hyperf 数据库事务指南(PHP 框架)

Hyperf 数据库事务指南&#xff08;PHP 框架&#xff09; 1. ⚙️ 数据库配置 1.1 配置文件 MySQL 配置位于 config/database.php&#xff0c;通常通过环境变量&#xff08;.env&#xff09;管理敏感信息&#xff1a; <?phpdeclare(strict_types 1); /*** This file i…

动态ds-vnp之normal和shortcut两种方式配置案例

normal方式配置 hub配置 dhcp enable interface GigabitEthernet0/0/0 ip address 3.3.3.3 255.255.255.0 interface GigabitEthernet0/0/1 ip address 192.168.3.254 255.255.255.0 dhcp select interface interface Tunnel0/0/0 ip address 10.1.1.3 255.255.255.0 tunnel…

ubuntu20.04调试livox aiva驱动获取激光雷达数据

实验环境ubuntu20.04 平台包括本地x86平台和jetson orin平台都测试ok 参考 ubuntu20.04上获取Livox Avia雷达点云数据 1.下载相关资料 下载包括&#xff1a;Livox Avia 用户手册中文.pdf、Livox_Viewer_For_Linux_Ubuntu16.04_x64_0.10.0&#xff08;用于显示激光雷达数据&am…

VS2022 C#【自动化文件上传】AutoFileUpload 新需求 V13

这里写自定义目录标题 需求分析实现方法原来&#xff08;需要修改的位置&#xff09;替换为如下代码&#xff08;添加三行数据&#xff09; 需求 现在已有程序&#xff1a;AutoFileUpload 存储excel表中时间列的第一列的列名到数据库中 分析 user只是想存储列名到数据表列去…

技术QA | ADC/DAC芯片测试研讨会笔记请查收!

6月19日&#xff0c;《ADC/DAC芯片测试前沿&#xff1a;德思特ATX系统高效方案与实战攻略》线上研讨会圆满结束。感谢大家的观看与支持&#xff01; 在直播间收到一些观众的技术问题&#xff0c;我们汇总了热点问题并请讲师详细解答&#xff0c;在此整理分享给大家&#xff0c…

区块链技术未来的发展趋势

以下是区块链技术未来的一些发展趋势&#xff1a; 技术层面 - 性能提升&#xff1a;分片技术会不断成熟和完善&#xff0c;将区块链网络划分为多个分片&#xff0c;每个分片独立处理交易&#xff0c;以提高交易吞吐量和网络可扩展性。同时&#xff0c;共识机制也会持续创新&a…

电商领域企业级应用后端开发 (Java) 就业前景深度分析报告 (2025-2030)

目录 一、行业概述与发展趋势 1.1 电商行业发展现状与趋势 1.2 电商技术架构演进与趋势 二、电商领域 Java 开发岗位需求分析 2.1 岗位数量变化趋势 2.2 岗位地域分布特点 2.3 岗位层级与职责变化 三、电商领域 Java 开发人才竞争分析 3.1 人才供需状况 3.2 人才竞争核…

DVWA Brute Force漏洞深度分析与利用指南

DVWA简介 DVWA&#xff08;Damn Vulnerable Web Application&#xff09;是一个基于PHP/MySQL的脆弱性Web应用平台&#xff0c;专为安全专业人员设计&#xff0c;用于测试技能和工具。它包含十大安全模块&#xff0c;其中Brute Force&#xff08;暴力破解&#xff09;是最基础…

【Android】Activity 的生命周期和启动模式

文章目录 Activity 的生命周期和启动模式1. 任务和返回栈2. Activity 的四种状态2.1 运行状态2.2 暂停状态2.3 停止状态2.4 销毁状态 3. Activity的生命周期3.1 生命周期回调方法3.2 演示 Activity 的生命周期 4. Activity的启动模式4.1 standard&#xff08;标准模式&#xff…

八大架构宪法 - 技术使用指导说明文档

我们定义了八部宏伟的“架构宪法”,这份 《八大架构宪法技术使用指导说明文档》,将作为交付给人类架构师和高级AI代理的 “战术手册”。 核心目标是:将每一部宪法的抽象哲学,转化为在项目不同阶段中、具体的、可操作的技术决策指南。回答一个关键问题:“在选择了某一部宪…

创建顶部导航

导航组件,在layout文件夹下面新建 ResponsiveNavbar.vue <template><nav class"navbar" :class"{ navbar--mobile: isMobile }"><div class"navbar-container"><!-- Logo --><div class"navbar-logo">…

AI对话导出工具 (AI Chat Exporter)——支持 ChatGPT, Grok 和 Gemini 平台

&#x1f680; AI对话导出工具 (AI Chat Exporter) 轻松将AI对话导出为标准Markdown格式 支持 ChatGPT, Grok 和 Gemini 平台 相关代码已开源至 Github 欢迎Star ✨ 功能特点 &#x1f504; 多平台支持&#xff1a;同时支持 ChatGPT, Grok 和 Gemini 三大AI平台&#x1f4dd;…

【MATLAB代码】基于MVC的EKF和经典EKF对三维非线性状态的滤波,提供滤波值对比、误差对比,应对跳变的观测噪声进行优化

本文所述的代码实现了改进的扩展卡尔曼滤波算法&#xff08;MVC-EKF&#xff09;&#xff0c;针对三维运动估计场景&#xff0c;与经典EKF算法进行性能对比。代码通过引入Versoria函数优化协方差更新过程&#xff0c;显著提升了在测量异常值干扰下的状态估计鲁棒性。 文章目录 …

【Linux】Linux系统的基础操作

目录 常用命令速递 系统目录结构及路径 Linux 常用命令 做两个小项目 据此操作 用户配额 前言 当下&#xff0c;Linux 系统作为开源操作系统&#xff0c;意义和作用重大。技术上&#xff0c;其开源特性极大推动软件开发进步&#xff0c;全球开发者可共同完善&#xff0c…

使用 C++/OpenCV 构建中文 OCR 系统:实现账单、发票及 PDF 读取

使用 C/OpenCV 构建中文 OCR 系统&#xff1a;实现账单、发票及 PDF 读取 在当今数字化浪潮中&#xff0c;自动从文档中提取信息至关重要&#xff0c;尤其是在处理大量账单、发票和 PDF 文件时。光学字符识别&#xff08;OCR&#xff09;技术是实现这一目标的核心。本文将详细…