zoukankan      html  css  js  c++  java
  • 小程序 鼠标事件

    微信小程序鼠标事件

    事件分类

    事件分为冒泡事件和非冒泡事件: 
    1. 冒泡事件(bind):当一个组件上的事件被触发后,该事件会向父节点传递。 
    2. 非冒泡事件(catch):当一个组件上的事件被触发后,该事件不会向父节点传递。 
    bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

    WXML的冒泡事件列表

    类型触发条件
    touchstart 手指触摸动作开始
    touchmove 手指触摸后移动
    touchcancel 手指触摸动作被打断,如来电提醒,弹窗
    touchend 手指触摸动作结束
    tap 手指触摸后马上离开
    longtap 手指触摸后,超过350ms再离开

    冒泡讲解

    <view id="outter" bindtap="handleTap1">
        outer view
        <view id="middle" catchtap="handleTap2">
            middle view
            <view id="inner" bindtap="handleTap3">
                inner view
            </view>
        </view>
    </view>

    点击inner view后只触发handleTap3,然后再触发handleTap2.不触发handleTap1。 
    因为handleTap2中的绑定类型是catch,阻止了冒泡事件。

    返回对象

    BaseEvent 基础事件对象属性列表:

    属性类型说明
    type String 事件类型
    timeStamp Integer 事件生成时的时间戳
    target Object 触发事件的组件的一些属性值集合
    currentTarget Object 当前组件的一些属性值集合

    type

    代表事件的类型。

    timeStamp

    页面打开到触发事件所经过的毫秒数。

    target

    触发事件的源组件。

    属性类型说明
    id String 事件源组件的id
    tagName String 当前组件的类型
    dataset Object 事件源组件上由data-开头的自定义属性组成的集合
    dataset

    在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。 书写方式: 以data-开头,多个单词由连字符-链接,不能有大写(大写会自动转成小写)如data-element-type,最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

    示例: 
    <view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

    Page({
      bindViewTap:function(event){
        event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
        event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
      }
    })

    CustomEvent 自定义事件对象属性列表(继承 BaseEvent):

    属性类型说明
    detail Object 额外的信息

    detail

    自定义事件所携带的数据,如表单组件的提交事件会携带用户的输入,媒体的错误事件会携带错误信息,详见组件定义中各个事件的定义。

    点击事件的detail 带有的 x, y 同 pageX, pageY 代表距离文档左上角的距离。

    TouchEvent 触摸事件对象属性列表(继承 BaseEvent):

    属性类型说明
    touches Array 触摸事件,当前停留在屏幕中的触摸点信息的数组
    changedTouches Array 触摸事件,当前变化的触摸点信息的数组

    touches

    touches 是一个数组,每个元素为一个 Touch 对象(canvas 触摸事件中携带的 touches 是 CanvasTouch 数组)。 表示当前停留在屏幕上的触摸点。

    Touch 对象
    属性类型说明
    identifier Number 触摸点的标识符
    pageX, pageY Number 距离文档左上角的距离,文档的左上角为原点 ,横向为X轴,纵向为Y轴
    clientX, clientY Number 距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴

    changedTouches

    changedTouches 数据格式同 touches。 表示有变化的触摸点,如从无变有(touchstart),位置变化(touchmove),从有变无(touchend、touchcancel)。

    特殊事件: <canvas/> 中的触摸事件不可冒泡,所以没有 currentTarget。

    bindtap

    程序代码

    <view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>

    对应的js

    Page({
      tapName: function(event) {
        console.log(event)
      }
    })

     

    {
    "type":"tap",
    "timeStamp":895,
    "target": {
      "id": "tapTest",
      "dataset":  {
        "hi":"WeChat"
      }
    },
    "currentTarget":  {
      "id": "tapTest",
      "dataset": {
        "hi":"WeChat"
      }
    },
    "detail": {
      "x":53,
      "y":14
    },
    "touches":[{
      "identifier":0,
      "pageX":53,
      "pageY":14,
      "clientX":53,
      "clientY":14
    }],
    "changedTouches":[{
      "identifier":0,
      "pageX":53,
      "pageY":14,
      "clientX":53,
      "clientY":14
    }]
    }

    可以看到,返回的type是tap 
    同时在target.id节点中也可以看到 对应的id 
    在a.target.dataset.hi中也可以找到对应的data-id的值(data-hi → hi)

    由鼠标事件(MouseEvent)可以发现:
           其中包含了许多的坐标,且每个坐标的含义都不一样。下面我们来挨个介绍常用的坐标,以及它们的含义。

    一、clientX、clientY
    点击位置距离当前body可视区域的x,y坐标

    二、pageX、pageY
    对于整个页面来说,包括了被卷去的body部分的长度

    三、screenX、screenY
    点击位置距离当前电脑屏幕的x,y坐标

    四、offsetX、offsetY
    相对于带有定位的父盒子的x,y坐标

    五、x、y
    和screenX、screenY一样

    如图所示:

  • 相关阅读:
    SQL语句获取数据库名、表名、储存过程以及参数列表 狼
    CKEditor3.3+CKFinder2.0附带CKF去除水印 狼
    media player 和realplayer 编程接口 狼
    教您如何去认识人!(识人术) 狼
    引用 JS判断浏览器类型方法 狼
    (转)初始化多维数组
    kmeans 聚类 (代码为: 博客数据聚类) (python )
    对博客订阅源URL中的单词进行计数 (仅限英文博客,中文订阅源不支持 )
    eclipse +python 修改 各种颜色 +字体
    常见错误收集: lucene 读取word文档问题
  • 原文地址:https://www.cnblogs.com/dianzan/p/8323485.html
Copyright © 2011-2022 走看看