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 相关文章推荐
jquery分页插件jpaginate在IE中不兼容问题
Apr 22 Javascript
javascript删除元素节点removeChild()用法实例
May 26 Javascript
JavaScript学习笔记整理之引用类型
Jan 22 Javascript
JavaScript如何实现跨域请求
Aug 05 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
详解如何在nuxt中添加proxyTable代理
Aug 10 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
js中对象和面向对象与Json介绍
Jan 21 Javascript
extjs图表绘制之条形图实现方法分析
Mar 06 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
Echarts如何重新渲染实例详解
May 30 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新手上路(十四)
2006/10/09 PHP
PHP内核介绍及扩展开发指南―基础知识
2011/09/11 PHP
PHP容易被忽略而出错陷阱 数字与字符串比较
2011/11/10 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
PHP针对中英文混合字符串长度判断及截取方法示例
2017/03/31 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JsEasy简介 JsEasy是什么?与下载
2007/03/07 Javascript
VBS通过WMI监视注册表变动的代码
2011/10/27 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
2013/04/23 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript中Form表单技术汇总(推荐)
2016/06/26 Javascript
jquery插件autocomplete用法示例
2016/07/01 Javascript
浅析JavaScript的几种Math函数,random(),ceil(),round(),floor()
2016/12/22 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
jQuery实现字符串全部替换的方法【推荐】
2017/03/09 Javascript
vue-cli3配置与跨域处理方法
2019/08/17 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
跟老齐学Python之print详解
2014/09/28 Python
Python实现字典排序、按照list中字典的某个key排序的方法示例
2018/12/18 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
python实现视频压缩功能
2020/12/18 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
基于html5 canvas做批改作业的小插件
2020/05/20 HTML / CSS
建筑工程专业毕业生自荐信
2013/10/19 职场文书
2014国培学习感言
2014/03/05 职场文书
2014年党支部学习材料
2014/05/19 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014年最新大专生职业生涯规划书范文
2014/09/13 职场文书
学前教育见习总结
2015/06/23 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers