00:00
这个呢是同杰克瑞类似的事件,然后呢,我们这节课就重点讲一下。下面这个。这个我们刚看了看一下two里面独特的哎塔事件。这个是重点啊。把页面结构给大家打开来。这样的话呢,先看结构上面这是三个div,这呢是一个button层,哎,样式这些咱们就不说了啊,我分别区分开了,分别呢大家看ID box123,还有个BTN啊。没问题,那下来先说一下在a two里边它有什么样的事件呢?注意看啊,首先第一个叫tap事件。Tap执意过来,是击敲打的意思。在里边它就表示的是点击事件。说白了,它是利用在document上绑定的原生的touch,底层还是不装touch?
01:02
哎,在document上绑定这个世界来模拟的type世界。说到这句话的时候,大家应该想一个问题,我这个世界是不是上来绑定在document上了?但是我触发肯定是的下面酶的子元素。所以它利用的是冒泡。就和事件委托是一样的。这是tap事件,我们来测一个。这有个BOX1。这些方法很好用啊,这些是重点。我们先把基本的写好,来来个Dollar符,哎,井号BOX1,然后呢,咱们这一把去给他绑定一个时间。刚刚是不是有个叫T的,直接就写它就和你之前的click start写一样,这版来我去alert一下哎。直接就是tip。
02:01
触发的事件,我们来看一下。刷新一下点击。首先你看到他是不是也能触发,哎,这就是我们移动端的事件。好,这是退步事件,但是呢,通常来说大家不会这样去写。怎么写呢?这就不用懊了,上来直接一个什么事件啊,Team事件,而后面直接传一个回调。哎,直接重新回调,就和我们之前的什么一样。肯定可以一样来,我们来看一下刷新卡一点是不是也能触发,哎,这种是最常用的。这是单纯的keep事件,就要点击事件。而连图里面更好的是,他给我们封装了这些东西。Single team single是单一的意思吗?在这儿它叫什么?哎,这不应该说是点击事件。单机世界。给我们提供了这些方法特别好啊,来这一把,我去井号拿一下BOX2这些东西不用我操吧啊,他就是那三个盒子啊,然后呢,我们直接去绑定一个叫CT的事件,我们来看一下。
03:15
来alert一下,比如说这一次是我单击了啊一下。你想有单击必然会有什么双击事件。在这叫。的,我不知道咱们班有没有玩那些。什么王者荣耀,还是撸啊撸那些。Double kill是吧,就那个意思,Double啊,Table,这叫双击世界,双击世界来还是给他绑定这一把,我要和他轻松开,就把单机世界换成双击世界。不用算,因为我们要在同一个元素上是吧,给它区分一下。懂我的意思吗?相当于我是不是绑定了两个世界?
04:02
刷新,看着这个,我得温柔点。我单击了一下看着啊,我刚刚是点击了一下,我在快点。就连着按这什么双击了一下,这个东西很有用,是因为你在实际的开发当中,移动端你想经常会遇到单击双击这种事情。如果说大家还是用你们之前原生的那些TOUCH2,你说能不能做。其实也能做。他底层就是把那些事情,人家给你干了这些活。他来去判断是单机还是双机。那我问一下大家,如果是让你做的话,你有没有思路?我如何区分用户是单机还是双机?根据什么来判断?对,时间差。你判断就是它当次点击距离上一次点击的时间嘛,能懂不?哎,给他一个区间范围。
05:00
然后呢,在这儿要你们有时候测可能测的还今天测的还挺正常,你哎,你看刚夸完他。我这个tap事件,我这是就点了一次它触发,有时候触发两次啊,这个是因为Chrome他在模拟真机的时候,虽然是模拟的特别好了,但盘不是100%。如果说你用真机去测的话,肯定没有问题,能懂不?而且大家在测这个单击双击的时候温柔一点,我发现了轻轻点点,好像每次就是你想要的效果啊。叠的重了就不行了。好,这个是单击还有双击,还有什么实验比较好再看。Long。这个我们平时自己也能想到,Long表示的是长按事件。什么时候又长安世界大招?我们浏览一些网页,是不是有时候有可能想粘一段话,这样的话,你是不是手指首先要按住才能出来那个粘贴复制啊。
06:04
哎,这个时候用它比较好,我能找到BO3这个盒子,然后呢,这一次呢,给它来一个叫long的事件,我们来看一下这一把去alert一个,哎,我长。按了一下。刷新。大家看着啊,不惦记一开。他会处罚吗?双击移开也不会触发。哎,这是人家分装好了,点好什么时候回厨房看着啊,我点上去一直不放手。是不是才会处罚,其实也能理解,Long也是长按事件,根据什么来判断他用户是想要长按。你手指作用在目标元素上的连续时间。对不对,在这呢柱里面,它这规定了,当一个元素连续被按住超过750毫秒才算长按时间,否则的话算你点击。
07:09
算点这个我怎么知道750毫秒,你可以看他的码。点击世界不是touch吗?看到这个750毫秒long tip delete是延时的意思,这不七百五嘛,当然你既然知道了它原码里面在这儿可以设置时间,其实如果说你们以后开发的需求不是这个,你可以直接在这去改它。那个。对。这是长按事件啊,还有一个事件sweep。这叫滑动事件。然后最后有个button,哎,我记得我是叫他,然后呢,我们去绑定一个SW事件。
08:00
来一个function,我先去alert一个东西,那这一把呢,是我滑动了来一下,我们来看一下我这个bta针对的是最后这个大家知道吧,来刷新。看着啊。这是不是都不动啊,那是我写错了吗?你看一下这边有报错吗。很明显没有。然后点击说你肯定不会触发,那为什么不会触发呢?大家看我在外边故意加了个高度,给了他一个果冻条。哎,这个时候要涉及到一个问题。你们,哎,切实实际的想一下,你拿到一个手机,这样滑的话,你是想要触发一个滑动事件,还是想要干其他的事情。你去浏览一个网页很长,我手指划的时候,我是想干嘛?滑翻页。你页面是不是很长,我是不是想要翻整个页面往上去滑它,哎,这个时候呢,我们要说一下,在他世界里边,你手指有一个默认的世界,就叫翻页。
09:08
那这个时候,其实我在他身上去滑动的时候,它默认你是在翻页,而不是想去触发什么滑动事件。所以说如果说大家想触发这个滑动事件的话,你应该怎么办?先去把他之前那个翻页那个默认行为是不是给我禁止掉。在这儿呢,给大家说一个属性。看着啊,往上往上我就放到这儿。星号是什么意思?所有的,然后有这样一个属性叫。Touch。Action这个用过吗?没有touch X默认是o two这个属性啊,代表的就是如果是o two的话,允许你那些默认行为触发。
10:00
但是现在我们是不是不想让他的默认行为出发,你就可以改为什么,那这个属性记住了。好,然后我来刷新一下看看。这是不是就能滑了?哎,我上下左右动的话。现在滑动事件没有问题了。但是问题又来了。看着。你是不是把所有的翻页行为都禁止掉了,导致我在他这个八字以外的地方,我想翻页都翻不了。如何去解决这个问题呢?从这出发。我故意去写个星号,星号是不是把所有的这个翻译的行为禁止掉了,你现在其实只想禁止掉的是谁?是这个八字的能懂吧,所以把这换成它井号BT。这是不是找对应的八字呢?来,我们来看一下。
11:02
刷新先还一个试试看是吧,没问题,到它之外你去翻个页,哎,也没问题。这个一定要记住了,接下来咱们要做一个小的项目啊,下午要做,我们到时候我会问你们要先给大家看一下,我们最终学完知识点要做的东西是什么。等一下啊。就他。把这个做完,哎,咱们就算完事。这没问题吧,到时候我会问你要这个啊,记住了。好,那这是滑动是Swift,它除了swe这个是也是上下左右都可以滑,然后RI to呢,还针对单一的方向进行了分装,其实这些物大家应该是能懂。如果说我把这个换成sweep left,那么它只能是触发向左滑动的事件。
12:03
应该好理解吧,来刷新一下。我先向右来一个,这肯定不会,然后来向左是不是能滑动啊,哎,这是根据大家以后的需求,看你是用哪个方向的。没有问题。然后啊,其他的我就不测了啊,其他的我就不测了,然后我说一下滑动事件根据什么来触发呢,大家说。我怎么知道他是想滑动,你想啊,我很有可能手指是这样的,我一上去了,手稍微松了一下,我又又在这儿稍微滑了一点点,你看我放开了它会出房门。不会出发。那说明他根据什么来判断。这好好短,你长按事件的时候是根据时间。滑动呢?
13:00
是根据你在啊目标元素上在你某一个方向连续滑动的距离。对不对。连续滑动的距离。你们之前在做那个移动端项目,是不是有一个防抖洞?那个不就是判断,它只不过是防抖动的,意思是防止手指什么上下这样滑。一样的东西啊,它就是判断你这样连续滑动的距离,如果说大于30个像素。算,滑动小于三的像素不算。但这就是z to人家自己的世界。有的这些事件其实对于我们而言,开发人员而言很方便。你自己去分装一个单机双击事件试试看。嗯,试试看。好,那这个呢,是替补事件。
我来说两句