JavaScript学习笔记024-默认行为0滚轮事件
时间:2022-06-11
本文章向大家介绍JavaScript学习笔记024-默认行为0滚轮事件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
Author:Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力,都不会被生活辜负
- 不忘初心,方得始终
想要进入前端圈子里工作
原来需要懂得太多太多
刚开始学习前端
好高骛远
以为html+css很牛逼了
然后学了js以为自己已经是前端了
到处投简历
说自己精通原生js
不会任何框架
现在想来
还是太年轻
学了node+mongodb+pug+layui
学了vue
却发现要成为一个真正的前端工程师,这些远远不够
还需要git
还需要less,sass
还需要小程序
还需要Bootstrap
还需要React + Redux
......
博大精深的前端啊...
<!DOCTYPE html> <!-- 文档类型:标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字:英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干:可视化区域 -->
<script>
/*
默认行为:
浏览器自带的默认事件
当需要自定义这些行为的时候,就需要干掉默认行为
*/
// 阻止默认行为
event.preventDefault();
event.returnValue = false; // 低版本ie兼容写法
document.oncontextmenu = function (e){
e = e || window.event;
return false; // 只能阻止DOM0级事件
}
/*
滚轮事件:onmousewheel
注意:onmousewheel不支持火狐
火狐滚轮事件:DOMMouseScroll
*/
// 大众浏览器写法
document.onmousewheel = function (e){
e = e || window.event;
e.preventDefault();
// 大众浏览器滚轮滚动方向
e.wheelDelta; // 方向的值(+120向前滚,-120向后滚)
}
// 火狐写法(只支持滚轮DOM2级事件)
document.addEventListener("DOMMouseScroll", (e) => {
e = e || window.event;
e.preventDefault();
// 火狐滚轮滚动方向
e.detail; // 方向的值(-3向前滚,+3向后滚)
})
// 滚轮事件兼容
mousewheel(document, function (e){
e = e || window.event;
console.log("滚轮事件");
if (e.wheelDetail > 0){
console.log("向前滚动");
} else {
console.log("向后滚动");
}
}, true); // 第三个参数,true(阻止默认行为),默认为false(不阻止默认行为)
function mousewheel(dom, cb, bool){
/*
滚轮方向:
e.wheelDetail
正值向前
负值向后
*/
var type = "mousewheel";
if (dom.onmousewheel === undefined){
type = "DOMMouseScroll";
}
}
// 真正的事件函数
function typeFn(e){
e = e || window.event;
// 统一滚轮事件的方向
e.wheelDetail = e.wheelDelta / 120 || e.detail / -3;
// 判断默认行为
if (!!bool){
// 阻止默认行为
if (e.preventDefault){
e.preventDefault();
} else {
event.returnValue = false;
}
}
cb.call(this, e);
}
if (dom.addEventListener){
dom.addEventListener(type, typeFn);
} else {
dom.attachEvent("on" + type, typeFn);
}
</script>
</body>
</html>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- frp内网穿透部署搭建教程,内网端口暴露给了外网
- Android使用Intent的Action和Data属性实现点击按钮跳转到拨打电话和发送短信界面
- Linux安装Collabora Online让NextCloud支持Office在线编辑
- 教你在CentOS7安装Vuze(Azureus)
- Pwn-EXP模板
- Linux学习随手记
- PHP session用法其实很简单
- 爬虫代理适合的业务和场景
- Flutter基础widgets教程-OverflowBox篇
- iOS音视频接入- TRTC语音聊天室
- vscode使用COS作为图床编写markdown文档
- 一文爱上可视化神器Plotly_express
- 神策大数据用户行为分析
- 3分钟短文:为了你少跳坑,Laravel写好了用户授权
- 巧用ingest pipeline实现Elasticsearch索引的重定向