通过鼠标的滚动来实现图片的放大和缩小,没错,像我这样不思进取的小白,从来不会自己动手撸一遍。
主要的功能函数:
![](https://i-blog.csdnimg.cn/blog_migrate/ebb73822c2b0d93b4e4b242a2c8e56be.png)
一开始还挺纳闷为什么没有传入event参数也可以在函数中访问到,想起曾经是要传入一个event/e的呀,后来百度了一下,事件event是window里的东西。
然后回到react项目中,首先是要获取到img的真实的dom元素,使用了ref。
![](https://i-blog.csdnimg.cn/blog_migrate/c6fa780326ec7fb91832781ad75f761b.png)
获取到真实的DOM元素后,然后再将功能函数放上去就可以了;
![](https://i-blog.csdnimg.cn/blog_migrate/03a9ad23157e62267af44039e38338ea.png)
嘿嘿,任务完成。拜拜!
其实,我应该可以早点下班回去的。
然后,想把这个再写一遍,放到自己的GitHub上。
就在下班之际,我create-react-app搭建了一个学习用的react。
然后开开心心的将代码从项目上复制过去,然后结果功能函数里报错了:
![](https://i-blog.csdnimg.cn/blog_migrate/ed67bf0e397882a9c7cebda475a151d5.png)
然后就开始一脸蒙蔽了,怎么会就找不到event了,明明使用的都是react框架呀,怎么就错了呢,因为项目我是接手的,所以我就猜想是不是装了什么插件,而我的react可是什么都没有呀,我的老天鹅。。。百思不得其姐。
报的错误是:Unexpected use of ‘event’ no-restricted-globals;
然后复制粘贴百度
![](https://i-blog.csdnimg.cn/blog_migrate/f5680fb7c8cc308244b73cf111242940.png)
结果这一堆东西,好像没有我想要的答案。
然后又回到了代码上,给它传了一个参数event:
![](https://i-blog.csdnimg.cn/blog_migrate/c61dd25fe1b9e81b4b2b076b3fd7ae3d.png)
![](https://i-blog.csdnimg.cn/blog_migrate/e99207056fb3fbcc6ede4b1556fa0e65.png)
我以为这样应该是可以了,确实没有报错了,但是滚动鼠标没有图片没有放大缩小。
问题继续。。。
然后我将两个的imgDom和event打印出来一看,发现了不同的地方:
![](https://i-blog.csdnimg.cn/blog_migrate/e73e69402f420bb0f79d309a50624b29.png)
![](https://i-blog.csdnimg.cn/blog_migrate/62f16ae2ce43f52796a1ac487707e111.png)
失败的event是Class,成功的event是WheelEvent;
然后我再将失败的event.wheelDelta给打印出来是undefined
这就使我非常纳闷了,怎么会这样呢?
然后又是各种百度。。。结果搜不到,也可能是自己百度的功底还有待加强。
一看时间,靠,十点半了,撤。。不然广州的地铁就要休息了。
第二天下午我问了问隔壁的同事,他也和我一样一开始有点蒙蔽,谁叫我们都那么的白呢。
然后,我们俩就开始继续折腾这个问题。
他叫我点开Class和WheelEvent对比一下,看看有什么不同,确实它们的大部分属性都是相同的,然后继续点开_proto_,然后在Class到Object之间发现了 _proto_:SyntheticEvent;这个东西引起他的注意,于是他叫我百度了一下这个单词,然后进入了react的文档:合成事件(SyntheticEvent);感觉这篇文档就是答案的关键。然后耐下心来看完这篇文档,这个内容还是第一次看。确实文档中还有很多的东西没有看,自己也就看了主要概念,高级指南也只看了点点。
那么SyntheticEvent是什么呢?看看中文文档的概述:
![](https://i-blog.csdnimg.cn/blog_migrate/fac9d90afb9abdbbcf4ff8e5c1e03c1b.png)
然后通过event.antiveEvent就可以访问到Class中的WheelEvent,这样就可以使用滚轮事件了。不过说来也真实蠢,命名Class的log里type前面就有nativeEvent:WheelEvent;但是自己心瞎就是看不到。然后我将event改成了event.nativeEvent就成功了:
![](https://i-blog.csdnimg.cn/blog_migrate/92e0be751377e9888cb8b01a3e41d1d7.png)
然后我不传入event了,直接使用window.event:
![](https://i-blog.csdnimg.cn/blog_migrate/aa8f86214464974ac3d39185abbb89d7.png)
也成功了。
原来react的合成事件是将事件event合并到了它的事件了,直接访问是event是
不可以访问到window下的event事件。
但是有一点还是想不明白,那就是两个都是react写的,为什么一个可以,一个却不行?
后来看了两个react的版本号:
一个是16.4.0的:
![](https://i-blog.csdnimg.cn/blog_migrate/533f702f1f5451ca026e39c25ed9edfd.png)
一个是16.6.3的:
![](https://i-blog.csdnimg.cn/blog_migrate/02b33aa63eb0fe15ee3991b9998eef59.png)
如果不是某些插件导致的,或许就是版本号的问题了。
最后
最近还整理一份JavaScript与ES的笔记,一共25个重要的知识点,对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识,提升工作效率。
有需要的小伙伴,可以点击下方卡片领取,无偿分享