微信小程序中的冒泡事件

背景

一、概念

首先引用百度百科解释下什么是事件冒泡。

所谓事件冒泡,就是指当事件发生后,这个事件就要开始传播(从里到外或者从外向里)。为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身可能不能处理这个事件,事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件),或者按钮的父级绑定有事件函数,当该点击事件发生在按钮上,按钮本身并无处理事件函数,则传播到父级去处理。


二、html、js冒泡事件介绍

例如如下代码:

<body onclick="alert('aaa');">
    <div onclick="alert('bbb');">
         <a href="#" class="cooltip" title="这是我的超链接提示1。" onclick="alert('ddd');">提示a>
    div>
body>

上面这段代码一共有三个事件,body,div,a都分别绑定了单击事件。在页面中当单击a标签会连续弹出3个提示框。这就是事件冒泡引起的现象。事件冒 泡的过程是:

Created with Raphaël 2.1.2 a div body

a冒泡到div冒泡到body。

三、引发问题

本来在上面的代码中只想触发元素的onclick事件,然而

事件也同时 触发了。因此我们必须要对事件的作用范围进行限制,当单击元素的onclick事件时只触发本身的事件。

四、处理方法

  • 用 event.stopPropagation()阻止事件的传递行为;
  • query中可用用preventDefault()的方法来阻止元素的默认行为;
  • jquery中对冒泡和默认行为的阻止方法同样也可以改写,改写后能够达到同样的效果
event.preventDefault();  改写为:  return false;
event.stopPropagation();  改写为:  return false;

小程序中的事件绑定和冒泡

小程序中事件绑定的写法和组件属性一致,以key=”value”的形式,其中:

key以bind或者catch开头,然后跟上事件的类型,如bindtap、catchtouchstart。也可以写成bind:tap、catch:touchstart。同时bind和catch前还可以加上capture-来表示捕获阶段

bindcapture-bind的含义分别代表事件的冒泡阶段捕获阶段
对于如下代码:

<view id="outer" bind:tap="handleTap4" capture-bind:tap="handleTap1">
  outer view
  <view id="inner" bind:tap="handleTap3" capture-bind:tap="handleTap2">
    inner view
  view>
view>

点击 inner view 会先后调用handleTap1、handleTap2、handleTap3、handleTap4。

bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。

如果将以上代码的capture-bind:tap="handleTap1"改成capture-catch:tap="handleTap1",点击inner view只会触发handleTap1(catch事件阻止了tap事件冒泡)。
如下:

<view id="outer" bind:tap="handleTap4" capture-catch:tap="handleTap1">
  outer view
  <view id="inner" bind:tap="handleTap3" capture-bind:tap="handleTap2">
    inner view
  view>
view>
附表:小程序常见事件类型
类型 触发条件
touchstart 手指触摸动作开始
touchmove 手指触摸后移动
touchcancel 手指触摸动作被打断,如来电提醒,弹窗
touchend 手指触摸动作结束
tap 手指触摸后马上离开
longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发
longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart 会在一个 WXSS animation 动画开始时触发
animationiteration 会在一个 WXSS animation 一次迭代结束时触发
animationend 会在一个 WXSS animation 动画完成时触发
备注:

除上表列举的事件类型之外的其他组件自定义事件,如无特殊声明都是非冒泡事件。

你可能感兴趣的:(小程序)