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 相关文章推荐
写入cookie的JavaScript代码库 cookieLibrary.js
Oct 24 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
移动端脚本框架Hammer.js
Dec 15 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
vuex中使用对象展开运算符的示例
Sep 25 Javascript
JS实现可针对算术表达式求值的计算器功能示例
Sep 04 Javascript
node解析修改nginx配置文件操作实例分析
Nov 06 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
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下打开URL地址的几种方法小结
2010/05/16 PHP
关于PHP堆栈与列队的学习
2013/06/21 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
使用ExtJS技术实现的拖动树结点
2010/08/05 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
动态加载script文件的两种方法
2013/08/15 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
javascript实现的多个层切换效果通用函数实例
2015/07/06 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
在 Express 中使用模板引擎
2015/12/10 Javascript
javascript仿百度输入框提示自动下拉补全
2016/01/07 Javascript
微信小程序中单位rpx和rem的使用
2016/12/06 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
javascript定时器取消定时器及优化方法
2017/07/08 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
vue项目在webpack2实现移动端字体自适配功能
2020/06/02 Javascript
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
Python脚本判断 Linux 是否运行在虚拟机上
2015/04/25 Python
python列表的常用操作方法小结
2016/05/21 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
Python自动化测试中yaml文件读取操作
2020/08/20 Python
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
网络工程师个人的自我评价范文
2013/10/01 职场文书
党员学习十八大感想
2014/01/17 职场文书
实习生求职自荐信
2014/02/07 职场文书
我为自己代言广告词
2014/03/18 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
2014年个人总结范文
2015/03/09 职场文书
为自己工作观后感
2015/06/11 职场文书
Oracle 数据仓库ETL技术之多表插入语句的示例详解
2021/04/12 Oracle