wxxcx文档笔记——框架/事件/事件的捕获阶段

事件的捕获阶段

自基础库版本 1.5.0 起,触摸类事件支持捕获阶段。捕获阶段位于冒泡阶段之前,且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。需要在捕获阶段监听事件时,可以采用capture-bindcapture-catch关键字,后者将中断捕获阶段和取消冒泡阶段。

在下面的代码中,点击 inner view 会先后调用handleTap2handleTap4handleTap3handleTap1

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

调用顺序分析:

  捕获阶段位于冒泡阶段之前,所以先看capture-bindcapture-catch关键字,而捕获阶段又是从父节点往里走,所以顺序为handleTap2handleTap4

  capture排序完成后再比较冒泡阶段的顺序,而冒泡阶段是从子节点往外扩展,所以接下来的顺序是handleTap3handleTap1。

如果将上面代码中的第一个capture-bind改为capture-catch,将只触发handleTap2

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

原文地址:https://www.cnblogs.com/yourself/p/8832126.html

时间: 2024-10-09 23:20:39

wxxcx文档笔记——框架/事件/事件的捕获阶段的相关文章

JavaScript文档加载和事件绑定

为了保证网页代码层次清晰,便于管理,一般HTML中只体现网页结构,具体的行为处理通过JS实现,样式则通过CSS文件管理. 在以上原则下通过JS实现行为时,一定要注意文档加载过程中,执行JS代码的时机.页面加载过程有两个事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载.) (1) 一些待调用函数定义,要在调用前定义. (2) 对于完善网页元素的JS,伴随文档

document.ready和onload的区别——JavaScript文档加载完成事件

文章转自:http://blog.csdn.net/kk5595/article/details/5713209 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成.(可以说:ready 在onload 前加载!!!) 我的理解: 一般样式控制的,比如图片大小控制放在onload 里面加载; 而:jS事件触发的方法,可以在ready 里面加载; 更多内容戳这里:http://blog.

jsWindow 对象 Window 对象 Window 对象表示浏览器中打开的窗口。 如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。 注释:没有应用于 window 对象的公开标准,不过所有浏览器都支持该对象。 Window 对象集合 集合 描述 frames[] 返回窗口中所有命

一.JSX简介 JSX就是Javascript和XML结合的一种格式.React发明了JSX,利用HTML语法来创建虚拟DOM.当遇到<,JSX就当HTML解析,遇到{就当JavaScript解析. 如下(JS写法) var child1 = React.createElement('li', null, 'First Text Content'); var child2 = React.createElement('li', null, 'Second Text Content'); var

【Windows编程】系列第十一篇:多文档界面框架

前面我们所举的例子中都是单文档界面框架,也就是说这个窗口里面的客户区就是一个文档界面,可以编写程序在里面输入或者绘制文本和图形输出,但是不能有出现多个文档的情况.比如下面的UltraEdit就是一个典型的多文档界面,他可以同时编辑多个文档,每个文档还可以最大化,最小化等等,我们今天就来看看多文档的基本框架是怎么实现的. 多文档界面的框架创建需要几下几步. 主框架窗口创建 主框架窗的创建跟普通的窗口没有什么区别,就是自己注册一个类并用该类创建一个重叠窗口,这个可以用CreateWindow/Cre

文档生成框架

序言 Word文档生成在许多项目中都是需要的,目前来看有两种方案,一种是通过Apache POI工具包.iText来生成,另外一种是利用Office Open Xml规范来进行生成.各种方案各有优缺点,这里不对其进行详细比较,已经有许多人进行过深入的比较,详细请咨询谷哥和度娘.这里采用的方案是利Office Open Xml的方式进行文档生成. 对于采用POI,iText来说,要生成复杂的Doc文件,其实并不容易.而采用Xml结构生成,去把一个文档生成xml文件,看看里面的内容,估计也会是满头是

[毕业设计]多文档自动摘要.面向灾害事件

我在做什么 顾名思义,多文档自动摘要,即是完成多个文档的摘要内容提取. 在这里,我们的研究对象,单指灾害事件. 设计思路 在完成多文档自动摘要前,首先要思考以下几个问题: 以什么为基本单位做内容提取? 什么才能称为重要的内容? 基本单位 对于一个文档,我们可以将它拆分为:文档本身,段落,句子,词语,字. 首先,摘要内容将会是一段可阅读的内容,因此我们不能以"词语"."字"为单位,因为很显然,他们都不能表达完整语义. 第二,一个文档完整的描述了一个事件,它包含了很多方

jquery学习文档笔记

1.未见过的事件: focusin跟focus事件区别在于,他可以在父元素上检测子元素获取焦点的情况. focusout跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况. 2.使用wrapAll方法 举例如下 原始代码: <div class="mm"><p>我们在公司</p></div><div class="mv">    <p>我们在公司</p>    <

文档笔记说明

2015.4.18始-中级前端交流群日常问题集 注:以下文档基于“js中级前端开发群”日常讨论问题及相应解析进行相关记录. 起源:加入豪哥前端交流群之后,尤其从初级群升到中级群之后,感觉收获很多,成长也很快 .这都是跟规范“群规”引导下的良好的问答氛围以及热情交流的群员帮助是分不开的,使很多新人避免了不少弯路,但同时也暴露出一些问题,没有一份详细的笔记来记录我们的“成长过程”,比如日常讨论经常出现一些“经验性解答”和当前“前端流行趋势”的讨论,故因此想收集起来这些问题和讨论,作为日后所遇问题的查

20个GitHub最热门的Java开源项目:文档、框架、工具

专注于Java领域优质技术,欢迎关注 文章来源:JavaGuide 以下涉及到的数据统计,数据来源:https://github.com/trending/java?since=monthly[1] .下面推荐的内容从 Java 学习文档到最热门的框架再到热门的工具应有尽有,建议收藏+在看! 1.LeetCodeAnimation •Github 地址: https://github.com/MisterBooo/LeetCodeAnimation[2] •Star: 29.0k (11,492