getZoom 可以获取画布当前缩放级别，用 setZoom 设置一个新的缩放级别。
有天，辛苦做了个复杂操作功能的页面，上线后有用户反馈：很多功能使用不了。惊了，以为是哪里出了bug。 立马联系用户，才发现原来是用户使用笔记本电脑，没有禁用触控板，然后不小心碰到导致整个界面都放大，很多功能超出界面不见了。 然而那能怎么办，用户第一，自然得快速解决这个问题，而且是触控板和触摸屏都得解决。
回答这个问题之前，我们首先要具备DOM事件流捕获与冒泡的知识，这里只讲JS中如何设置这两种事件监听，例如对body注册点击事件：
其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。
在3.X的ArcGIS JS API版本中我们可以轻松的调用相应的API来实现地图的缩放大小的控制，让实例化后的地图在我们设置的范围中进行缩放，但是在4.X的版本中并没有相应的属性来控制，所以我们采用一种折中的方式来实现。
上面的代码使用了 Fabric.js 绑定了页面上的画布，并创造了一个粉红色的矩形。
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
如果你的项目有画布拖拽、缩放等功能，而且你不希望背景图跟随拖拽或缩放，那一定要往下读。
设置鼠标滚轮监听 , 在 Canvas 组件中 , 调用 addMouseWheelListener 函数 , 添加 鼠标滚轮监听器 MouseWheelListener ,
我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。
iScroll是一个高性能，资源占用少，无依赖，跨平台的javascript上拉加载，下拉刷新的滚动插件，目前版本v5.2.0。
卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板，其中包括Elements、Network、Resources基础功能部分和Sources进阶功能部分，对于一般的网站项目来说，其实就是需要这几个面板功能就可以了（再加上console面板这个万精油）。它们的作用大多数情况下是帮助你进行功能开发的。然而在你开发应用级别的网站项目的时候，随着代码的增加，功能的增加，性能会逐渐成为你需要关注的部分。那么网站的性能问题具体是指什么呢？在卤煮看来，一个网站的性能主要关乎两项，一是加载性能、二是执行性能。第一项可以利用Network来分析，我以后会再次写一篇关于它的文章分享卤煮的提高加载速度的经验，不过在此之前，我强烈推荐你去阅读《web高性能开发指南》这本书中的十四条黄金建议，这是我阅读过的最精华的书籍之一，虽然只有短短的一百多页，但对你的帮助确实无法估量的。而第二项性能问题就体现在内存泄露上，这也是我们这篇文章探讨的问题——通过Timeline来分析你的网站内存泄露。
如果要为 Java AWT 界面编程的应用设置键盘按键监听 , 必须为 Frame / JFrame 窗口设置键盘监听 , 为组件设置是无效的 ;
前几天有给大家分享一个svelte.js自定义网页版弹窗组件svelte-layer。今天再来分享一个最新基于svelte.js开发的网页虚拟美化滚动条组件svelte-scrollbar。
本文将用一个极简的例子详细讲解如何用原生JS一步步实现完整的图片预览和查看功能，无任何第三方依赖，兼容PC与H5，实现了触屏双指缩放等，干货满满。
写js的时候都知道，函数是我们基本上面每天都在写的一个东西，因为很多的功能是需要函数来实现的，没有函数很多的效果是没办法实现的，那么今天简单的总结一下可以触发函数的一些事件。
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。 大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。 同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到一定频率就足够了。因为跑得越多，带来的效果也是一样。倒不如，把js代码的执行次数控制在合理的范围。既能节省浏览器CPU资源，又能让页面浏览更加顺畅，不会因为js的执行而发生卡顿。这就是函数节流和函数防抖要做的事。
一朋友刚面了腾讯音乐（TME）前端开发岗位（两年经验），本瓜撰文记之。以期同各面试人分享交流~
本文由 IMWeb 团队成员 erasermeng 首发于腾讯内部KM论坛。点击阅读原文查看 IMWeb 社区更多精彩文章。 什么是滚动穿透 如图所示，有一层遮罩蒙层覆盖在body上时，当我们滚动遮罩层，它下面的内容也会跟着一起滚动，看起来好像是上面的滚动事件穿透到下面的DOM元素上一样，我们称之为滚动穿透。 阻止冒泡？ 刚开始遇到这个问题的同学可能会联想到是不是由于事件冒泡到body上引起的，于是监听 scroll/touchmove事件，阻止事件冒泡。 事实上，这并没有什么卵用。 首先，一般而言滚动
最近使用 uni-app 开发的一个 H5 项目，其中有一个 用 uni-app 原生 swiper 组件写的轮播。
Author：Mr.柳上原 付出不亚于任何的努力 愿我们所有的努力，都不会被生活辜负 不忘初心，方得始终 想要进入前端圈子里工作 原来需要懂得太多太多 刚开始学习前端 好高骛远 以为html+css很牛逼了 然后学了js以为自己已经是前端了 到处投简历 说自己精通原生js 不会任何框架 现在想来 还是太年轻 学了node+mongodb+pug+layui 学了vue 却发现要成为一个真正的前端工程师，这些远远不够 还需要git 还需要less，sass 还需要小程序 还需要Bootstrap 还需要Rea
最近在开发AI聊天助手的时候，遇到了一个很有趣的滚动问题。我们需要开发一个类似微信聊天框的交互体验：
该文介绍了如何使用Chrome浏览器的Timeline功能来分析前端页面的性能，包括内存泄漏、CPU使用率、网络请求、渲染时间、内存变化等。通过在页面上进行操作，可以查看不同时间段内各项性能指标的变化情况。同时，还可以利用Timeline来找出内存泄漏等问题，从而优化前端性能。
最近发现，许多前端开发人员（包括作者我哈），对chrome的开发者工具中的使用并不是特别深入，而本文时对chrome开发者工具Timeline的一个讲解。
在不久前的Google I/O 2016 Mobile Web Talk中，Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners。该特性目前已经集成到Chrome51版本中。 Chrome51上使用Passive Event Listener特性前后的效果对比 链接地址：https://www.youtube.com/watchv=65VMej8n23A 从效果对比视频中可以明显看到，使用Passive Event Listeners特性后，页面的滑动流畅度
在不久前的Google I/O 2016 Mobile Web Talk中，Google公布了一个让页面滑动更流畅的新特性Passive Event Listeners。该特性目前已经集成到Chrom
在数字孪生三维场景中，通过键盘和鼠标来控制镜头的移动，缩放是很常见的行为，也是很必要的行为，用户正是通过这些操作，达到对整个三维场景的观看和控制。
这个假期玩了不少galgame，不过有些很老的游戏没有自动运行模式，点击鼠标又太伤按键了，于是想把滚动鼠标滚轮映射为点击鼠标。 网上搜了一下，没发现什么现成的软件，而按键精灵又太重量级了，于是考虑干脆自己用Python写个算了。 很幸运地找到《用Python监听鼠标和键盘事件》这篇文章，于是把PyHook和PyWin32都装上了（建议下exe版，免得安装时各种蛋疼）。
google developers 官方文档: https://developers.google.com/web/tools/chrome-devtools/
jquery中没有鼠标滚轮事件，那么可以使用jquery的滚轮事件插件jquery.mousewheel.js。
1、解决滚动穿透：通过给弹层绑定touchmove和mousewheel事件，取消默认行为实现。
find()可以在所有后代元素里查找，而children()只会查找子代元素（不包括第二层级）。
当我们在移动终端上滑动页面，手指离开屏幕后，页面的滚动并不会马上停止，而是在一段时间内继续保持惯性滚动，并且滑动阻尼感和持续时间与滑动手势的幅度成正比。
当用户频繁的与UI界面操作交互时,例如:窗口调整(触发resize),页面滚动,上拉加载(触发scroll),表单的按钮提交,商城抢购疯狂的点击(触发mousedown),而实时的搜索(keyup,input),拖拽等
鼠标指针指向界面中的 Canvas 画布某个位置 , Canvas 画布中绘制着一张超大图片 , 以该位置为中心 , 滑动鼠标滚轮时进行缩放 ;
chrome（ie）与firefox对滚轮事件的监听方式是不一样的,并且返回的数值正负也是正好相反的
事件类型： DOM3级事件规定了以下几类事件；如下： UI事件： 当用户与页面上的元素交互时触发； load事件：当页面加载完后(包括所有图像，所有javascript文件，css文件等外部资源)，就会触发window上面的load事件，如下代码是加载图片的： HTML代码： JS代码如下： var img = document.getElementById("img"); EventUtil.addHandler(img,'load',fu
发布于 2017-11-23 13:25 更新于 2018-08-12 08:02
即每个油猴脚本都有的，脚本开头很多行注释的内容，这是油猴脚本关键的基础部分，刚开始接触可能会一头雾水，但你绝不能忽视这部分内容
元素节点操作 创建节点 var $div = $(''); var $div2 = $('这是一个div元素'); 插入节点 1、append()和appendTo()：在现存元素的内部，从后面插入元素 var $span = $('这是一个span元素'); $('#div1').append($span); ...... 2、prepend()和prependTo()：在现存元素的内部，从前面插入元素06
在 ArcGIS Maps SDK for JavaScript 中，Map 和 MapView 是两个重要的概念，用于创建和展示地图应用程序。
本文会带大家认识Canvas中常用的坐标变换方法 translate 和 scale，并结合这两个方法，实现鼠标滚轮缩放以及画布拖动功能。
大家好，这次又是到了实际的项目需求讨论时间，我的一些文章下面，有时候有人评论，求源码，求Demo，我的主张是仔细看文章，自己理解了再写一遍，会懂得更多。大部分人都习惯直接拿过来用，能用了都不会去看为什么能实现需求。所以我还是写以如何实现为主。（这B装的我太累了。我TM就是懒啊。不想写Demo，自觉性还是有待提高。）
要做出这个效果，其实不用说，首先要把这五个div的基本HTML+CSS给写出来先。
var EventUtil = { //返回对event对象的引用 getEvent: function (event) { return event ? event
链接：https://juejin.cn/post/7137192060045492231
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
