js捕获鼠标滚轮事件代码


Posted in Javascript onDecember 16, 2013

之前看到一个人人网高级前端面试的笔试题

要求手写代码,其中有个题是做一个图片展示

类似百度图片最下面小缩略图那个展示栏

然后要求有个鼠标滚轮滚动变大变小的要求

这个我还真不知道怎么做,在网上找了找资料

发现可以捕获onmousewheel的事件

然后根据event.wheelDelta值的正负来判断是前滚还是后滚

随便写了个小例子,顺便捕获下键盘的按键,不太美观没有换行

因为用textNode做的,加不进去html代码

说到这里是不是可以用这种方法来防止xss注入呢?

<body onkeydown="showKey()" onmousewheel="showKey()">

function showKey(){ 
if(event.wheelDelta){

// 正120为前滚 负120为后滚 
var textNode = document.createTextNode(event.wheelDelta+" "); 
document.body.appendChild(textNode); 
document.body.normalize(); 
} 
if(event.keyCode) 
{ 
var textNode = document.createTextNode(event.keyCode+" "); 
document.body.appendChild(textNode); 
document.body.normalize(); 
} 
}

其中还刚好用到今天刚看高级设计那里的textNode元素那块的一个

合并多个textNode的方法

normalize();
Javascript 相关文章推荐
Javascript面向对象设计一 工厂模式
Dec 20 Javascript
js判断屏幕分辨率的代码
Jul 16 Javascript
node.js中watch机制详解
Nov 17 Javascript
JavaScript Function函数类型介绍
Apr 08 Javascript
vue-resource 拦截器使用详解
Feb 21 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
JS正则获取HTML元素的方法
Mar 31 Javascript
分析JS单线程异步io回调的特性
Dec 01 Javascript
vue使用axios实现文件上传进度的实时更新详解
Dec 20 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
javascript调试过程中找不到哪里出错的可能原因
Dec 16 #Javascript
使用firebug进行调试javascript的示例
Dec 16 #Javascript
javascript和jquery修改a标签的href属性
Dec 16 #Javascript
JavaScript修改css样式style动态改变元素样式
Dec 16 #Javascript
使用apply方法实现javascript中的对象继承
Dec 16 #Javascript
javaScript如何生成xmlhttp
Dec 16 #Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 #Javascript
You might like
PHP中防止SQL注入实现代码
2011/02/19 PHP
yii框架中的Url生产问题小结
2012/01/16 PHP
对比分析php中Cookie与Session的异同
2016/02/19 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
js实现接收表单的值并将值拼在表单action后面的方法
2015/11/23 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
2017/09/20 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
javascript严格模式详解(含严格模式与非严格模式的区别)
2019/11/12 Javascript
JS实现躲避粒子小游戏
2020/06/18 Javascript
详解Python中的__new__()方法的使用
2015/04/09 Python
python实现多线程的方式及多条命令并发执行
2016/06/07 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
Python实现简易版的Web服务器(推荐)
2018/01/29 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
python爬虫-模拟微博登录功能
2019/09/12 Python
python re模块匹配贪婪和非贪婪模式详解
2020/02/11 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
Python读写Excel表格的方法
2021/03/02 Python
CSS3弹性伸缩布局之box布局
2016/07/12 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
佳能英国官方网站:Canon UK
2017/08/08 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
我能否用void** 指针作为参数, 使函数按引用接受一般指针
2013/02/16 面试题
公司出纳岗位职责
2013/12/07 职场文书
编辑求职信样本
2013/12/16 职场文书
采购主管的岗位职责
2013/12/17 职场文书
对祖国的寄语大全
2014/04/11 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis