JavaScript学习笔记024-默认行为0滚轮事件

Mr. 柳上原

发布于 2018-10-10 10:58:00

7440

发布于 2018-10-10 10:58:00

文章被收录于专栏：菜鸟前端工程师菜鸟前端工程师

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.09.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

java