原创:微信小程序bindtap绑定html元素点击事件

什么是事件?

事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。

详解(以常见的tap点击事情为例)

模板.wxml代码:

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

JS文件代码:

Page({
  data:{
    ...
  },  onload:function(){    ...  },
  tapName: function(event) {
    console.log(event)
    //do something code
  }
})
时间: 2024-10-29 09:13:42

原创:微信小程序bindtap绑定html元素点击事件的相关文章

微信小程序开发(二)点击事件

接着上篇博客继续. 如下修改: // index.wxml <view>Hello World!</view> <button bindtap="but">点击按钮</button> // 按钮 bindtap属性就是添加点击事件,名字是but // index.js Page({ but: function(){ // 通过but点击事件触发后面的函数 console.log("你好") } }) 保存代码后,点击按

微信小程序实现给循环列表点击添加类(单项和多项)

在微信小程序里面没有DOM对象, 不能操作DOM. 所有的操作通过数据来实现,下面主要实现了给循环列表点击添加类的操作 一.单项 目标需求:实现下图,给点击的view增加类,每次只能选择一个. 主要思路:给点击的view增加类,依靠点击的index对state进行赋值.如果相同时,给该view增加类. 实现代码: .wxml文件 1 <view> 2 <view class='appointent-date'> 3 <view class="appointent-d

微信小程序:防止多次点击跳转(函数节流)

场景 在使用小程序的时候会出现这样一种情况:当网络条件差或卡顿的情况下,使用者会认为点击无效而进行多次点击,最后出现多次跳转页面的情况,就像下图(快速点击了两次): 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法,就是函数节流(throttle):函数在一段时间内多次触发只会执行第一次,在这段时间结束前,不管触发多少次也不会执行函数. /utils/util.js: function throttle(fn, gapTime) { if (gapTime == null ||

微信小程序bindtap点击事件与事件冒泡

原文链接:https://www.cnblogs.com/lhm166/articles/9947383.html 事件冒泡就是指嵌套事件发生,如果多层标签嵌套, 里层事件发生后, 其外层会相应发生, 如: <view bindtap='handout'> outer <view bindtap='handmiddle'> middle <view bindtap='handinner'>inner</view> </view> </vie

微信小程序bindtap事件

bindtap就是点击事件 在wxml文件下 <button type="primary" bindtap="btnclick"> {{btnText}} </button> 在js文件下 Page({ /** * 页面的初始数据 */ data: { text : "这里是内容" , btnText : "这里是按钮", }, /** * 生命周期函数--监听页面加载 */ onLoad: funct

微信小程序-bindtap事件子元素不传参

<ul id="tabBar"> <li class="{{currentTabBar_s == 10?'active':''}}" data-current="10" bindtap="swichTabN"><image src='../../images/icon/tab_MyTodo_s.png' class='img_s'></image><image src='.

微信小程序监听用户上滑下滑事件

今天做了一个要根据用户上滑或者下滑来显示不同内容的功能. 思路:先监听用户是上滑还是下滑,监听到结果后改变data数据中用来判断模块显示隐藏的变量,两个需要切换的模块使用两个hidden,data中定义两个变量来接受更改后的true或者false 页面 hidden='{{bottom}}' hidden='{{top}}' data{ //初始化状态 top:true, bottom:false, } //判断浏览器滚动条上下滚动 if (t.scrollTop > a.data.scroll

赋予option元素点击事件后,点击select时却触发了option事件。如何解决?

将select的优先级提到option之前就可以了. 方法:为select元素添加position:relative: <select class="adt" name="ss"> <option>请选择</option> <foreach name='sf' item='f'> <option jibie="{$f.level}" value="{$f.name}" in

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer} .divchild{position: absolute;margin: