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(JS) 压缩 / 混淆 / 格式化 批处理工具
Dec 10 Javascript
基于jquery的点击链接插入链接内容的代码
Jul 31 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
jQuery实现带滚动线条导航效果的方法
Jan 30 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JavaScript获取表单enctype属性的方法
Apr 02 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
Node.js模块封装及使用方法
Mar 06 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
Sep 28 Javascript
jQuery实现的页面弹幕效果【测试可用】
Aug 17 jQuery
详解 微信小程序开发框架(MINA)
May 17 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
基于PHP+Ajax实现表单验证的详解
2013/06/25 PHP
Codeigniter整合Tank Auth权限类库详解
2014/06/12 PHP
php通过修改header强制图片下载的方法
2015/03/24 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
仅IE不支持setTimeout/setInterval函数的第三个以上参数
2011/05/25 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
jquery post方式传递多个参数值后台以数组的方式进行接收
2013/01/11 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
Javascript中this的用法详解
2014/09/22 Javascript
js单独获取一个checkbox看其是否被选中
2014/09/22 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jQuery中find()方法用法实例
2015/01/07 Javascript
js显示当前日期时间和星期几
2015/10/22 Javascript
使用vue.js制作分页组件
2016/06/27 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
2016/11/05 Javascript
jQuery实现发送验证码并60秒倒计时功能
2016/11/25 Javascript
ES6通过babel转码使用webpack使用import关键字
2016/12/13 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
ES6正则表达式的一些新功能总结
2017/05/09 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
原生js实现二级联动菜单
2019/11/27 Javascript
NodeJS开发人员常见五个错误理解
2020/10/14 NodeJs
Python实现购物系统(示例讲解)
2017/09/13 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
Django 中间键和上下文处理器的使用
2019/03/17 Python
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
银行会计财务工作个人的自我评价
2013/10/29 职场文书
酒吧副总经理岗位职责
2013/12/10 职场文书
校园活动策划书范文
2014/01/10 职场文书
工程部经理岗位职责
2015/02/02 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers