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 相关文章推荐
JS 无限级 Select效果实现代码(json格式)
Aug 30 Javascript
jquery、js调用iframe父窗口与子窗口元素的方法整理
Jul 31 Javascript
JavaScript中继承用法实例分析
May 16 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
详解js中Json的语法与格式
Nov 22 Javascript
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JavaScript字符串_动力节点Java学院整理
Jun 27 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
js实现贪吃蛇游戏 canvas绘制地图
Sep 09 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
各种战术和打法的原创者
2020/03/04 星际争霸
php 删除无限级目录与文件代码共享
2008/11/22 PHP
php 魔术方法使用说明
2009/10/20 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
javascript跨域的4种方法和原理详解
2014/04/08 Javascript
Area 区域实现post提交数据的js写法
2014/04/22 Javascript
javascript中var的重要性分析
2015/02/11 Javascript
C++中的string类的用法小结
2015/08/07 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
jquery.serialize() 函数语法及简单实例
2016/07/08 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
js实现文字头像的生成代码
2020/03/07 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
理解python正则表达式
2016/01/15 Python
Python的Flask框架中使用Flask-SQLAlchemy管理数据库的教程
2016/06/14 Python
Python实现的密码强度检测器示例
2017/08/23 Python
python实现图书馆研习室自动预约功能
2018/04/27 Python
Python jieba库用法及实例解析
2019/11/04 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
Python requests模块基础使用方法实例及高级应用(自动登陆,抓取网页源码)实例详解
2020/02/14 Python
Python调用SMTP服务自动发送Email的实现步骤
2021/02/07 Python
CSS3教程(5):网页背景图片
2009/04/02 HTML / CSS
html5 button autofocus 属性介绍及应用
2013/01/04 HTML / CSS
美国折衷生活方式品牌:Robert Graham
2018/07/13 全球购物
德国价格合理的品牌商品购物网站:averdo
2019/03/21 全球购物
"序列点" 是什么
2016/07/29 面试题
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
七年级作文之环保作文
2019/10/17 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP