编程 Javascript

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();

js捕获鼠标滚轮事件代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 检测浏览器类型和版本的代码

Sep 15 Javascript

window.addEventListener来解决让一个js事件执行多个函数

Dec 26 Javascript

jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍

Apr 26 Javascript

JS实现控制表格内指定单元格内容对齐的方法

Mar 30 Javascript

详解JavaScript函数对象

Nov 15 Javascript

JQuery fileupload插件实现文件上传功能

Mar 18 Javascript

原生 JS Ajax,GET和POST 请求实例代码

Jun 08 Javascript

vue.js单页面应用实例的简单实现

Apr 10 Javascript

VUE元素的隐藏和显示（v-show指令)

Jun 23 Javascript

node.js实现微信开发之获取用户授权

Mar 18 Javascript

vue 需求 data中的数据之间的调用操作

Aug 05 Javascript

js+cavans实现图片滑块验证

Sep 29 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无限分类源码分享(思路不错)

2011/10/13 PHP

php中的mongodb select常用操作代码示例

2014/09/06 PHP

PHP图像处理类库及演示分享

2015/05/17 PHP

php使用ftp实现文件上传与下载功能

2017/07/21 PHP

Yii2框架控制器、路由、Url生成操作示例

2019/05/27 PHP

js获得指定控件输入光标的坐标兼容IE,Chrome,火狐等多种主流浏览器

2013/05/21 Javascript

JavaScript tab选项卡插件实例代码

2016/02/23 Javascript

AngularJS基础 ng-hide 指令用法及示例代码

2016/08/01 Javascript

基于jQuery实现的打字机效果

2017/01/16 Javascript

JavaScript30 一个月纯 JS 挑战中文指南(英文全集)

2017/07/23 Javascript

checkbox:click事件触发span元素内容改变的方法

2017/09/11 Javascript

详解angularJS+Ionic移动端图片上传的解决办法

2017/09/13 Javascript

react-router4按需加载(踩坑填坑)

2019/01/06 Javascript

微信小程序 image组件遇到的问题

2019/05/28 Javascript

JavaScript中reduce()的5个基本用法示例

2020/07/19 Javascript

JavaScript实现世界各地时间显示

2020/09/07 Javascript

js实现简单的轮播图效果

2020/12/13 Javascript

JavaScript中arguments的使用方法详解

2020/12/20 Javascript

[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG

2018/03/31 DOTA

[02:50]【扭转乾坤，只此一招】DOTA2全新版本永雾林渊开启新篇章

2020/12/24 DOTA

总结Python中逻辑运算符的使用

2015/05/13 Python

简述：我为什么选择Python而不是Matlab和R语言

2017/11/14 Python

十分钟搞定pandas(入门教程)

2019/06/21 Python

docker-py 用Python调用Docker接口的方法

2019/08/30 Python

Python使用socketServer包搭建简易服务器过程详解

2020/06/12 Python

在HTML5中如何使用CSS建立不可选的文字

2014/10/17 HTML / CSS

什么叫应用程序域？什么是受管制的代码？什么是强类型系统？什么是装箱和拆箱？

2016/08/13 面试题

一名女生的自荐信

2013/12/08 职场文书

新教师培训心得体会

2014/09/02 职场文书

幸福中国演讲稿

2014/09/12 职场文书

2014大学班主任工作总结

2014/11/08 职场文书

道路交通事故人身损害赔偿协议书

2014/11/19 职场文书

2014年环境整治工作总结

2014/12/10 职场文书

奖金申请报告模板

2015/05/15 职场文书

幽默口才训练经典句子（48句）

2019/08/19 职场文书

Win11 25163.1010更新补丁KB5016904推送，测试服务验证管道(附更新修复汇总)

2022/07/23 数码科技