js 在一个div盒子 长按事件 短时间按 及滑动键 区分

22 篇文章 0 订阅
6 篇文章 0 订阅

 <div :class="card“  :style="{'margin-top':index>0?'2rem':'1rem'}" @touchstart="gotouchstart(item.id)"  @touchend="gotouchend(item.id)"></div>

data(){
 return{

        timeOut:null,      

}
}

 // 手指按下事件

      gotouchstart(id) {

        window.isClick = true

        clearTimeout(this.timeOut)

        this.timeOut = setTimeout(()=>{

          console.log('长按事件',id)

          this.delectUserDrugsRemindNew(id);

          window.isClick = false

        }, 1000)

      },

      gotouchend(id) {

        if (window.isClick) {

          this.editWarn(id)

          console.log('点击事件',id)

        }

      },

      gotouchmove(id) {

        console.log('移动事件')

        window.isClick = false

      },

 // 项目销毁前清除定时器

    beforeDestroy() {

      clearTimeout(this.timeOut)

    },



第二种

 <div @touchstart="down(item.id)" @touchend="up(item.id)"  @click="clickEvent(item.id)" />

                

// 手指按下事件

      down(id) {

        this.timeOut = setTimeout(()=>{

            console.log("长按事件");

             this.delectUserDrugsRemindNew(id);

            this.isClick = false;

        },1000)

      },

       //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件

      up(id) {

        clearTimeout(this.timeOut);

          //鼠标释放时让lock异步执行,setTimeout因为异步任务,所以会放到任务队列最后执行,让click事件先执行了

          setTimeout(()=>{

             console.log("点击事件");

              this.isClick = true;

          })

      },

      clickEvent(id){

         this.editWarn(id)

        console.log('点击跳转');

      },

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个4个按的STM32标准库的C语言按处理程序示例,使用按消抖和计时器技术,区分按短按及连按: ```c #include "stm32f10x.h" #include "delay.h" #define BUTTON_UP_Pin GPIO_Pin_0 #define BUTTON_UP_GPIO_Port GPIOA #define BUTTON_DOWN_Pin GPIO_Pin_1 #define BUTTON_DOWN_GPIO_Port GPIOA #define BUTTON_LEFT_Pin GPIO_Pin_2 #define BUTTON_LEFT_GPIO_Port GPIOA #define BUTTON_RIGHT_Pin GPIO_Pin_3 #define BUTTON_RIGHT_GPIO_Port GPIOA #define LONG_PRESS_TIME 1000 // 按时间阈值,单位为毫秒 #define PRESS_INTERVAL_TIME 200 // 连按时间间隔阈值,单位为毫秒 volatile uint8_t button_up_state = 0; // 按状态变量,初始为未按下 volatile uint8_t button_down_state = 0; volatile uint8_t button_left_state = 0; volatile uint8_t button_right_state = 0; // 按消抖函数 uint8_t debounce(uint8_t pin_state) { static uint16_t cnt = 0; static uint8_t state = 0; if (pin_state != state) { cnt = 0; state = pin_state; } else { if (cnt < 10) cnt++; if (cnt == 10) return state; } return 2; // 返回2表示未稳定状态 } // 延时函数,用于精确计时 void delay_ms(uint16_t ms) { uint16_t i; while (ms--) { i = 1000; while (i--) { __nop(); // STM32嵌入式系统推荐使用的空指令 } } } int main(void) { // 初始化GPIO口和按消抖状态 GPIO_InitTypeDef GPIO_InitStruct; GPIO_InitStruct.GPIO_Mode = GPIO_Mode_IPD; GPIO_InitStruct.GPIO_Pin = BUTTON_UP_Pin | BUTTON_DOWN_Pin | BUTTON_LEFT_Pin | BUTTON_RIGHT_Pin; GPIO_Init(GPIOA, &GPIO_InitStruct); button_up_state = debounce(GPIO_ReadInputDataBit(BUTTON_UP_GPIO_Port, BUTTON_UP_Pin)); button_down_state = debounce(GPIO_ReadInputDataBit(BUTTON_DOWN_GPIO_Port, BUTTON_DOWN_Pin)); button_left_state = debounce(GPIO_ReadInputDataBit(BUTTON_LEFT_GPIO_Port, BUTTON_LEFT_Pin)); button_right_state = debounce(GPIO_ReadInputDataBit(BUTTON_RIGHT_GPIO_Port, BUTTON_RIGHT_Pin)); // 初始化计时器2 TIM_TimeBaseInitTypeDef TIM_TimeBaseInitStruct; NVIC_InitTypeDef NVIC_InitStruct; RCC_APB1PeriphClockCmd(RCC_APB1Periph_TIM2, ENABLE); TIM_TimeBaseInitStruct.TIM_Prescaler = 7199; // 时钟预分频,使计数器频率为10kHz TIM_TimeBaseInitStruct.TIM_CounterMode = TIM_CounterMode_Up; TIM_TimeBaseInitStruct.TIM_Period = 999; // 计数器自动重载值 TIM_TimeBaseInitStruct.TIM_ClockDivision = TIM_CKD_DIV1; TIM_TimeBaseInit(TIM2, &TIM_TimeBaseInitStruct); NVIC_InitStruct.NVIC_IRQChannel = TIM2_IRQn; NVIC_InitStruct.NVIC_IRQChannelPreemptionPriority = 1; NVIC_InitStruct.NVIC_IRQChannelSubPriority = 0; NVIC_InitStruct.NVIC_IRQChannelCmd = ENABLE; NVIC_Init(&NVIC_InitStruct); TIM_ITConfig(TIM2, TIM_IT_Update, ENABLE); TIM_Cmd(TIM2, ENABLE); // 游戏主循环 while (1) { // 处理按事件 uint8_t up_state = debounce(GPIO_ReadInputDataBit(BUTTON_UP_GPIO_Port, BUTTON_UP_Pin)); uint8_t down_state = debounce(GPIO_ReadInputDataBit(BUTTON_DOWN_GPIO_Port, BUTTON_DOWN_Pin)); uint8_t left_state = debounce(GPIO_ReadInputDataBit(BUTTON_LEFT_GPIO_Port, BUTTON_LEFT_Pin)); uint8_t right_state = debounce(GPIO_ReadInputDataBit(BUTTON_RIGHT_GPIO_Port, BUTTON_RIGHT_Pin)); if (up_state != 2 && up_state != button_up_state) { button_up_state = up_state; if (button_up_state == 0) { printf("用户按下了上箭头!\n"); } } if (down_state != 2 && down_state != button_down_state) { button_down_state = down_state; if (button_down_state == 0) { printf("用户按下了下箭头!\n"); } } if (left_state != 2 && left_state != button_left_state) { button_left_state = left_state; if (button_left_state == 0) { printf("用户按下了左箭头!\n"); } } if (right_state != 2 && right_state != button_right_state) { button_right_state = right_state; if (button_right_state == 0) { printf("用户按下了右箭头!\n"); } } // 稍作延时 delay_ms(20); } } // 计时器2中断处理函数 void TIM2_IRQHandler(void) { if (TIM_GetITStatus(TIM2, TIM_IT_Update) != RESET) { static uint16_t cnt = 0; static uint16_t press_duration = 0; static uint16_t press_interval = 0; if (button_up_state == 0 || button_down_state == 0 || button_left_state == 0 || button_right_state == 0) { cnt++; press_duration++; if (cnt == 500) // 每500ms输出一次按时间 { cnt = 0; if (press_duration >= LONG_PRESS_TIME) { printf("用户按了按!\n"); } press_duration = 0; } } else { press_duration = 0; if (press_interval < PRESS_INTERVAL_TIME) press_interval++; else press_interval = 0; } TIM_ClearITPendingBit(TIM2, TIM_IT_Update); } } ``` 这个程序会初始化4个GPIO口和计时器2,并使用按消抖和计时器技术,区分按短按及连按。当用户按下其中一个时,程序会输出相应的提示信息。按时间超过阈值时,程序会输出按提示信息。连续按时间间隔小于阈值时,程序会忽略后续按事件。你可以在这个基础上进行修改和扩展,实现更复杂的按处理功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值