编程 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 相关文章推荐

js 字符串操作函数

Jul 25 Javascript

用Jquery实现多级下拉框无刷新的联动

Dec 22 Javascript

js css后面所带参数含义介绍

Aug 18 Javascript

jquery文本框中的事件应用以输入邮箱为例

May 06 Javascript

js添加事件的通用方法推荐

May 15 Javascript

浅谈js中的in-for循环

Jun 28 Javascript

jQuery命名空间与闭包用法示例

Jan 12 Javascript

js+html5实现侧滑页面效果

Jul 15 Javascript

微信小程序选择图片和放大预览图片功能

Nov 02 Javascript

vue + vuex todolist的实现示例代码

Mar 09 Javascript

解决node修改后需频繁手动重启的问题

May 13 Javascript

vue 实现图片懒加载功能

Dec 31 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