微信小程序之点击事件

这篇具有很好参考价值的文章主要介绍了微信小程序之点击事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序中常用的点击事件主要是 tap,但除此之外还有其他的触摸类事件,用于不同的交互场景。以下是一些常见的点击和触摸相关的事件及其区别:

1、tap——最基本的点击事件,适用于一般的轻触交互,类似于 HTML 中的 click 事件。

<view onTap="handleTap">点击我</view>
Page({
  handleTap: function(e) {
    console.log('tap事件触发');
  }
})

2、bindtap——类似于 onTap,是另一种声明点击事件的方式,属于数据绑定语法,也是最常见的绑定事件的方式。

<button bindtap="buttonClicked">点击按钮</button>
Page({
  buttonClicked: function(e) {
    console.log('按钮被点击');
  }
})

3、catchtap——有时候为了阻止事件冒泡,会使用 catchtap 事件,它在触发后会阻止后续的 tap 事件继续向上冒泡。

3.1.冒泡事件:

冒泡(Bubble)是一种事件传播机制,在Web开发领域和微信小程序中广泛存在。当用户在一个页面元素上触发一个事件(比如点击事件),这个事件不仅仅在这个元素上执行相应的处理函数,还会按照DOM树的层次结构,由内向外逐级向上级元素传播这个事件,直到顶层元素或者被明确阻止传播为止。这个事件从子元素向父元素逐层传递的过程就像气泡从水底升到水面一样,因此得名“事件冒泡”。

在微信小程序中,事件冒泡的概念同样适用。当你在一个嵌套结构的组件中绑定事件时,如果子组件和父组件都绑定了同一类型的事件,那么当子组件触发事件时,首先会在子组件上调用事件处理函数,接着事件会沿组件层级向上冒泡,依次触发父组件上同类型的事件处理函数。这有助于简化事件处理逻辑,因为在父组件中可以集中处理多个子组件触发的相同事件。

<view id="parent">
  <view id="child" bindtap="childTap">点击我</view>
</view>
Page({
  childTap: function(event) {
    console.log('子组件的点击事件被触发');
  },
  parentTap: function(event) {
    console.log('父组件的点击事件被触发');
  }
});

这时候点击子组件会发现控制台输出:微信小程序之点击事件,微信小程序,小程序

因为当点击子组件时,会先执行childTap函数,然后事件冒泡到父组件并执行parentTap函数。如果你不希望事件冒泡,可以使用catchtap来阻止事件的进一步冒泡。文章来源地址https://www.toymoban.com/news/detail-856536.html

4、longtap、touchstart、 touchmove、touchend

  • longtap长按事件,当用户长按某个元素超过一定时间后触发。
  • touchstart、 touchmove、touchend触摸相关事件,分别对应手指触摸屏幕开始、移动和离开屏幕的过程。
  • 用于实现拖拽、滑动等更复杂的交互行为

到了这里,关于微信小程序之点击事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包