07. 尚硅谷_Zepto_touch event.avi原创

这个呢是同杰克瑞类似的事件，然后呢，我们这节课就重点讲一下。下面这个。这个我们刚看了看一下two里面独特的哎塔事件。这个是重点啊。把页面结构给大家打开来。这样的话呢，先看结构上面这是三个div，这呢是一个button层，哎，样式这些咱们就不说了啊，我分别区分开了，分别呢大家看ID box123，还有个BTN啊。没问题，那下来先说一下在a two里边它有什么样的事件呢？注意看啊，首先第一个叫tap事件。Tap执意过来，是击敲打的意思。在里边它就表示的是点击事件。说白了，它是利用在document上绑定的原生的touch，底层还是不装touch？

哎，在document上绑定这个世界来模拟的type世界。说到这句话的时候，大家应该想一个问题，我这个世界是不是上来绑定在document上了？但是我触发肯定是的下面酶的子元素。所以它利用的是冒泡。就和事件委托是一样的。这是tap事件，我们来测一个。这有个BOX1。这些方法很好用啊，这些是重点。我们先把基本的写好，来来个Dollar符，哎，井号BOX1，然后呢，咱们这一把去给他绑定一个时间。刚刚是不是有个叫T的，直接就写它就和你之前的click start写一样，这版来我去alert一下哎。直接就是tip。

触发的事件，我们来看一下。刷新一下点击。首先你看到他是不是也能触发，哎，这就是我们移动端的事件。好，这是退步事件，但是呢，通常来说大家不会这样去写。怎么写呢？这就不用懊了，上来直接一个什么事件啊，Team事件，而后面直接传一个回调。哎，直接重新回调，就和我们之前的什么一样。肯定可以一样来，我们来看一下刷新卡一点是不是也能触发，哎，这种是最常用的。这是单纯的keep事件，就要点击事件。而连图里面更好的是，他给我们封装了这些东西。Single team single是单一的意思吗？在这儿它叫什么？哎，这不应该说是点击事件。单机世界。给我们提供了这些方法特别好啊，来这一把，我去井号拿一下BOX2这些东西不用我操吧啊，他就是那三个盒子啊，然后呢，我们直接去绑定一个叫CT的事件，我们来看一下。

来alert一下，比如说这一次是我单击了啊一下。你想有单击必然会有什么双击事件。在这叫。的，我不知道咱们班有没有玩那些。什么王者荣耀，还是撸啊撸那些。Double kill是吧，就那个意思，Double啊，Table，这叫双击世界，双击世界来还是给他绑定这一把，我要和他轻松开，就把单机世界换成双击世界。不用算，因为我们要在同一个元素上是吧，给它区分一下。懂我的意思吗？相当于我是不是绑定了两个世界？

刷新，看着这个，我得温柔点。我单击了一下看着啊，我刚刚是点击了一下，我在快点。就连着按这什么双击了一下，这个东西很有用，是因为你在实际的开发当中，移动端你想经常会遇到单击双击这种事情。如果说大家还是用你们之前原生的那些TOUCH2，你说能不能做。其实也能做。他底层就是把那些事情，人家给你干了这些活。他来去判断是单机还是双机。那我问一下大家，如果是让你做的话，你有没有思路？我如何区分用户是单机还是双机？根据什么来判断？对，时间差。你判断就是它当次点击距离上一次点击的时间嘛，能懂不？哎，给他一个区间范围。

然后呢，在这儿要你们有时候测可能测的还今天测的还挺正常，你哎，你看刚夸完他。我这个tap事件，我这是就点了一次它触发，有时候触发两次啊，这个是因为Chrome他在模拟真机的时候，虽然是模拟的特别好了，但盘不是100%。如果说你用真机去测的话，肯定没有问题，能懂不？而且大家在测这个单击双击的时候温柔一点，我发现了轻轻点点，好像每次就是你想要的效果啊。叠的重了就不行了。好，这个是单击还有双击，还有什么实验比较好再看。Long。这个我们平时自己也能想到，Long表示的是长按事件。什么时候又长安世界大招？我们浏览一些网页，是不是有时候有可能想粘一段话，这样的话，你是不是手指首先要按住才能出来那个粘贴复制啊。

哎，这个时候用它比较好，我能找到BO3这个盒子，然后呢，这一次呢，给它来一个叫long的事件，我们来看一下这一把去alert一个，哎，我长。按了一下。刷新。大家看着啊，不惦记一开。他会处罚吗？双击移开也不会触发。哎，这是人家分装好了，点好什么时候回厨房看着啊，我点上去一直不放手。是不是才会处罚，其实也能理解，Long也是长按事件，根据什么来判断他用户是想要长按。你手指作用在目标元素上的连续时间。对不对，在这呢柱里面，它这规定了，当一个元素连续被按住超过750毫秒才算长按时间，否则的话算你点击。

算点这个我怎么知道750毫秒，你可以看他的码。点击世界不是touch吗？看到这个750毫秒long tip delete是延时的意思，这不七百五嘛，当然你既然知道了它原码里面在这儿可以设置时间，其实如果说你们以后开发的需求不是这个，你可以直接在这去改它。那个。对。这是长按事件啊，还有一个事件sweep。这叫滑动事件。然后最后有个button，哎，我记得我是叫他，然后呢，我们去绑定一个SW事件。

来一个function，我先去alert一个东西，那这一把呢，是我滑动了来一下，我们来看一下我这个bta针对的是最后这个大家知道吧，来刷新。看着啊。这是不是都不动啊，那是我写错了吗？你看一下这边有报错吗。很明显没有。然后点击说你肯定不会触发，那为什么不会触发呢？大家看我在外边故意加了个高度，给了他一个果冻条。哎，这个时候要涉及到一个问题。你们，哎，切实实际的想一下，你拿到一个手机，这样滑的话，你是想要触发一个滑动事件，还是想要干其他的事情。你去浏览一个网页很长，我手指划的时候，我是想干嘛？滑翻页。你页面是不是很长，我是不是想要翻整个页面往上去滑它，哎，这个时候呢，我们要说一下，在他世界里边，你手指有一个默认的世界，就叫翻页。

那这个时候，其实我在他身上去滑动的时候，它默认你是在翻页，而不是想去触发什么滑动事件。所以说如果说大家想触发这个滑动事件的话，你应该怎么办？先去把他之前那个翻页那个默认行为是不是给我禁止掉。在这儿呢，给大家说一个属性。看着啊，往上往上我就放到这儿。星号是什么意思？所有的，然后有这样一个属性叫。Touch。Action这个用过吗？没有touch X默认是o two这个属性啊，代表的就是如果是o two的话，允许你那些默认行为触发。

但是现在我们是不是不想让他的默认行为出发，你就可以改为什么，那这个属性记住了。好，然后我来刷新一下看看。这是不是就能滑了？哎，我上下左右动的话。现在滑动事件没有问题了。但是问题又来了。看着。你是不是把所有的翻页行为都禁止掉了，导致我在他这个八字以外的地方，我想翻页都翻不了。如何去解决这个问题呢？从这出发。我故意去写个星号，星号是不是把所有的这个翻译的行为禁止掉了，你现在其实只想禁止掉的是谁？是这个八字的能懂吧，所以把这换成它井号BT。这是不是找对应的八字呢？来，我们来看一下。

刷新先还一个试试看是吧，没问题，到它之外你去翻个页，哎，也没问题。这个一定要记住了，接下来咱们要做一个小的项目啊，下午要做，我们到时候我会问你们要先给大家看一下，我们最终学完知识点要做的东西是什么。等一下啊。就他。把这个做完，哎，咱们就算完事。这没问题吧，到时候我会问你要这个啊，记住了。好，那这是滑动是Swift，它除了swe这个是也是上下左右都可以滑，然后RI to呢，还针对单一的方向进行了分装，其实这些物大家应该是能懂。如果说我把这个换成sweep left，那么它只能是触发向左滑动的事件。

应该好理解吧，来刷新一下。我先向右来一个，这肯定不会，然后来向左是不是能滑动啊，哎，这是根据大家以后的需求，看你是用哪个方向的。没有问题。然后啊，其他的我就不测了啊，其他的我就不测了，然后我说一下滑动事件根据什么来触发呢，大家说。我怎么知道他是想滑动，你想啊，我很有可能手指是这样的，我一上去了，手稍微松了一下，我又又在这儿稍微滑了一点点，你看我放开了它会出房门。不会出发。那说明他根据什么来判断。这好好短，你长按事件的时候是根据时间。滑动呢？

是根据你在啊目标元素上在你某一个方向连续滑动的距离。对不对。连续滑动的距离。你们之前在做那个移动端项目，是不是有一个防抖洞？那个不就是判断，它只不过是防抖动的，意思是防止手指什么上下这样滑。一样的东西啊，它就是判断你这样连续滑动的距离，如果说大于30个像素。算，滑动小于三的像素不算。但这就是z to人家自己的世界。有的这些事件其实对于我们而言，开发人员而言很方便。你自己去分装一个单机双击事件试试看。嗯，试试看。好，那这个呢，是替补事件。