js捕获鼠标滚轮事件代码
更新时间：2013年12月16日 17:37:27 作者：
本文为大家介绍下如何使用js捕获鼠标滚轮事件，原理很简单，感兴趣的朋友可以参考下
之前看到一个人人网高级前端面试的笔试题
要求手写代码，其中有个题是做一个图片展示
类似百度图片最下面小缩略图那个展示栏
然后要求有个鼠标滚轮滚动变大变小的要求
这个我还真不知道怎么做，在网上找了找资料
发现可以捕获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();
相关文章
这篇文章主要介绍了es6数值的扩展方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
本文主要介绍了QT与javascript交互数据的实现，主要包括数据从QT流向JS以及数据从JS流向QT的几种方法，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
一个页面实现了两种右键菜单，当鼠标左键单击空白处时，右键菜单并不隐藏，下面为大家解决鼠标左键单击冲突的问题2014-05-05
这篇文章主要为大家详细介绍了js实现贪吃蛇游戏，canvas绘制地图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-09-09
这篇文章主要介绍了微信小程序实现定位及到指定位置导航的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
详解原生JavaScript实现jQuery中AJAX处理的方法
这篇文章主要介绍了原生JavaScript实现jQuery中AJAX处理的方法,作者根据jQuery中一些对AJAX请求的处理方式来用原生API实现,需要的朋友可以参考下2016-05-05
把jquery.cookie.js改了一下，改成了纯javascript版本，以备我以后项目只需，增加了一个得到页面全部cookie键值的功能2012-10-10
onbeforeunload与onunload事件异同点总结
本文对onbeforeunload与onunload事件的异同点、触发于、可以用在哪些元素以及解决刷新页面时不调用onbeforeunload等等，感兴趣的朋友可以参考下哈2013-06-06
本文主要介绍了js实现新增加事件：时间轴自动排列效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧2017-03-03
写出更好的JavaScript程序之undefined篇（中）
前一篇我介绍了几种广为使用的利用undefined这个概念值的办法，这一篇我会介绍一些不太常见的办法，其中还包括一个很巧妙的，我个人觉得很值得推广的办法。2009-11-11
最新评论