欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

js捕获鼠标滚轮事件代码

时间:2021-06-25 09:27:52|栏目:JavaScript代码|点击:

之前看到一个人人网高级前端面试的笔试题

要求手写代码,其中有个题是做一个图片展示

类似百度图片最下面小缩略图那个展示栏

然后要求有个鼠标滚轮滚动变大变小的要求

这个我还真不知道怎么做,在网上找了找资料

发现可以捕获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 textContent与innerText的异同分析

栏    目:JavaScript代码

下一篇:swiper动态改变滑动内容的实现方法

本文标题:js捕获鼠标滚轮事件代码

本文地址:http://www.codeinn.net/misctech/147844.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有