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 相关文章推荐
文本加密解密
Jun 23 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
jQuery实现复选框全选/取消全选/反选及获得选择的值
Jun 12 Javascript
node.js中的http.response.setHeader方法使用说明
Dec 14 Javascript
如何在Linux上安装Node.js
Apr 01 Javascript
对Angular中单向数据流的深入理解
Mar 31 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
微信小程序云开发(数据库)详解
May 17 Javascript
全面分析JavaScript 继承
May 30 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
vue-i18n实现中英文切换的方法
Jul 06 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 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 变量定义方法
2009/06/14 PHP
php计算税后工资的方法
2015/07/28 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
Laravel 对某一列进行筛选然后求和sum()的例子
2019/10/10 PHP
phpinfo的知识点总结
2019/10/10 PHP
javascript显示选择目录对话框的代码
2008/11/10 Javascript
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
2011/07/26 Javascript
jQuery控制输入框只能输入数值的小例子
2013/03/20 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
js正则表达式惰性匹配和贪婪匹配用法分析
2016/12/26 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
2017/07/24 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
JavaScript之解构赋值的理解
2019/01/30 Javascript
Vue 中 filter 与 computed 的区别与用法解析
2019/11/21 Javascript
基于Vue实现微前端的示例代码
2020/04/24 Javascript
electron踩坑之dialog中的callback解决
2020/10/06 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
[01:59]游戏“zheng”当时试玩会
2019/08/21 DOTA
python3序列化与反序列化用法实例
2015/05/26 Python
Python使用正则表达式获取网页中所需要的信息
2018/01/29 Python
Python cookbook(数据结构与算法)根据字段将记录分组操作示例
2018/03/19 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
Ibood荷兰:互联网每日最佳在线优惠
2019/02/28 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
《月亮湾》教学反思
2014/04/14 职场文书
安全环保演讲稿
2014/08/28 职场文书
2015新年联欢晚会开场白
2014/12/14 职场文书
社区安全温馨提示语
2015/07/14 职场文书
大学生创业计划书
2019/06/24 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
SpringCloud Alibaba项目实战之nacos-server服务搭建过程
2021/06/21 Java/Android