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结合CSS使用validate实现漂亮的验证
Jan 29 Javascript
js实现3D图片逐张轮播幻灯片特效代码分享
Sep 09 Javascript
JavaScript修改作用域外变量的方法
Mar 25 Javascript
jquery+ajax+text文本框实现智能提示完整实例
Jul 09 Javascript
Node.JS文件系统解析实例详解
May 15 Javascript
Vue from-validate 表单验证的示例代码
Sep 26 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
Dec 06 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
Feb 09 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 jQuery
JavaScript实现留言板案例
Mar 17 Javascript
JavaScript实现雪花飘落效果
Dec 27 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
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+oracle 分页类
2006/10/09 PHP
CI框架在CLI下执行占用内存过大问题的解决方法
2014/06/17 PHP
php多线程并发实现方法
2016/09/30 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
js 实现日期灵活格式化的小例子
2013/07/14 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
javascript之Boolean类型对象
2016/06/07 Javascript
JS简单测试循环运行时间的方法
2016/09/04 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
JS基于递归实现倒计时效果的方法
2016/11/26 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
JS验证码实现代码
2017/09/14 Javascript
基于Vuex无法观察到值变化的解决方法
2018/03/01 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
2019/07/03 jQuery
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
node.js使用yargs处理命令行参数操作示例
2020/02/11 Javascript
用Python代码来解图片迷宫的方法整理
2015/04/02 Python
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python定向爬取淘宝商品价格
2018/02/27 Python
python3实现多线程聊天室
2018/12/12 Python
python实现windows壁纸定期更换功能
2019/01/21 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
生日派对邀请函
2014/01/13 职场文书
观看《周恩来的四个昼夜》思想汇报
2014/09/12 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
2015年医务科工作总结范文
2015/05/26 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
德能勤绩工作总结
2015/08/11 职场文书
参观监狱警示教育心得体会
2016/01/15 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
python中的sys模块和os模块
2022/03/20 Python
Python万能模板案例之matplotlib绘制甘特图
2022/04/13 Python