编程 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 原型与继承说明

Jun 09 Javascript

JS 添加网页桌面快捷方式的代码详细整理

Dec 27 Javascript

jquery实现的导航固定效果

Apr 28 Javascript

js实现正方形颜色从下往上升的效果

Aug 04 Javascript

JavaScript中的fontsize()方法使用详解

Jun 08 Javascript

JavaScript中string对象

Jun 12 Javascript

浅析jQuery操作select控件的取值和设值

Dec 07 Javascript

详解angularjs中的隔离作用域理解以及绑定策略

May 31 Javascript

vue中使用element组件时事件想要传递其他参数的问题

Sep 18 Javascript

jQuery弹框插件使用方法详解

May 26 jQuery

vue+element_ui上传文件,并传递额外参数操作

Dec 05 Vue.js

vant时间控件使用方法详解

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