masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > js捕获鼠标滚轮事件代码_javascript技巧

js捕获鼠标滚轮事件代码_javascript技巧

WBOY
Lepaskan： 2016-05-16 17:08:44
asal
1169 orang telah melayarinya

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

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

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

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

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

发现可以捕获onmousewheel的事件

然后根据event.wheelDelta值的正负来判断是前滚还是后滚

随便写了个小例子，顺便捕获下键盘的按键，不太美观没有换行

因为用textNode做的,加不进去html代码

说到这里是不是可以用这种方法来防止xss注入呢？

复制代码 代码如下:



复制代码 代码如下:

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();
Label berkaitan：
js捕获 鼠标滚轮事件
sumber：php.cn
Artikel sebelumnya：Event altKey,ctrlKey,shiftKey属性解析_javascript技巧 Artikel seterusnya：extjs4 treepanel动态改变行高度示例_extjs
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
vue vee-validate menangkap masalah pemilihan pemilih tarikh Ikatan model v pada medan pemetik tarikh saya tidak berfungsi dengan betul. Apabila anda m...
daripada 2024-04-06 11:38:56
0
1
510
Elektron mendapat AppData pada pramuat Bagaimana untuk mendapatkan direktori AppData yang dipramuat? Background.js[...]asyncfunct...
daripada 2024-04-06 11:05:31
0
1
417
Pengendalian roda tetikus NumberInput mengabaikan penapisan peristiwa fasa tangkapan Versi yang sangat pendek: Saya agak tersekat dan tidak begitu faham mengapa kod ini memang...
daripada 2024-04-05 12:21:04
0
1
1387
Menjana kandungan menggunakan Ajax - menatal ke Id tidak berfungsi Saya menjana kandungan halaman berdasarkan data yang diperoleh melalui ajax. Masalah yang ...
daripada 2024-04-04 09:29:39
0
1
397
Perwakilan acara Javascript dengan pemilih dan kanak-kanak yang tidak diketahui Saya mempunyai pemilih dinamik (linkTrigger) yang sepatutnya menangkap klik pada elemen. S...
daripada 2024-04-03 23:39:19
0
1
420
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan