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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 Javascript
基于JS实现仿京东搜索栏随滑动透明度渐变效果
Jul 10 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
JS实现留言板功能[楼层效果展示]
Dec 27 Javascript
vue-cli项目代理proxyTable配置exclude的方法
Sep 20 Javascript
Vue退出登录时清空缓存的实现
Nov 12 Javascript
nuxt配置通过指定IP和端口访问的实现
Jan 08 Javascript
Antd的table组件表格的序号自增操作
Oct 27 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP之短标签开启设置
2013/06/17 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
JavaScript游戏之优化篇
2010/11/08 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
关于IE BUG与字符串截取substr的解决办法
2013/04/10 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
js实现字符串转日期格式的方法
2015/05/20 Javascript
jQuery实现动态表单验证时文本框抖动效果完整实例
2015/08/21 Javascript
老生常谈combobox和combotree模糊查询
2017/04/17 Javascript
node.js express中app.param的用法详解
2017/07/16 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
keep-alive不能缓存多层级路由菜单问题解决
2020/03/10 Javascript
[06:13]DOTA2进化论(修改版)
2013/10/08 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
django+echart数据动态显示的例子
2019/08/12 Python
利用python-docx模块写批量生日邀请函
2019/08/26 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python读取hdfs并返回dataframe教程
2020/06/05 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
pycharm 配置svn的图文教程(手把手教你)
2021/01/15 Python
美国在线珠宝商店:SZUL
2017/02/11 全球购物
计算机专业自荐信
2013/10/14 职场文书
公务员职务工作的自我评价
2013/11/01 职场文书
商务英语求职自荐信范文
2013/12/24 职场文书
环保建议书
2014/03/12 职场文书
师德师风整改措施
2014/10/24 职场文书
2015年大学班级工作总结
2015/04/28 职场文书
小学六年级毕业感言
2015/07/30 职场文书
html5表单的required属性使用
2021/07/07 HTML / CSS
Python 键盘事件详解
2021/11/11 Python
python套接字socket通信
2022/04/01 Python