一、阻止浏览器默认行为
- 默认行为：
a标签 自带点击效果
form 表单自己会提交
框选
鼠标右键菜单 - 表单事件：
失去焦点：blur
获取焦点：focus
提交：submit
重置：reset - 阻止浏览器默认行为：
要在你阻止的行为中添加阻止方法。
标准浏览器：
event.preventDefault();
IE低版本：
event.returnValue = false;
兼容写法：
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
<form action="https://www.baidu.com/s">
<input type="text" name="wd">
<button>提交</button>//可提交跳转
<button type="submit">提交</button>//可提交跳转
<button type="button">提交</button>//只是个单纯的按钮，不会提交
<input type="submit" value="提交">//可提交跳转
</form>
二、案例
1.右键菜单
<style>
ul {
display: none;
list-style: none;
border: 1px solid;
box-shadow: 0 0 3px 3px pink;
position: absolute;
}
</style>
<script>
window.onload = function() {
// 阻止浏览器的右键菜单
document.oncontextmenu = function(event) {
var event = event || window.event;
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
}
//实现自定义右键菜单
// 事件 == 右键按下
// 事件添加给 == document
// 事件实现： 让ul显示。 位置应该在鼠标位置上。
var myMenu = document.querySelector(".box");
document.onmousedown = function(event) {
var event = event || window.event;
if (event.button == 2) {
myMenu.style.display = "block";
myMenu.style.left = event.pageX + "px";
myMenu.style.top = event.pageY + "px";
} else {
myMenu.style.display = "none";
}
}
}
</script>
</head>
<body>
<ul class="box">
<li>菜单一</li>
<li>菜单二</li>
<li>菜单三</li>
</ul>
</body>
2.拖拽盒子（方法一）
- 事件源： smallBox
- 事件类型：
mousedown 鼠标按下
mouseup 鼠标抬起
mousemove 鼠标移动 - 事件处理函数：
mousedown 盒子可以移动
mousemove 盒子跟着鼠标移动
mouseup 盒子停止移动
offsetLeft ：小盒子距离大盒子的left值
offsetX： 鼠标相对于小盒子左上角的横坐标位置。
offsetX 值 固定
小盒子距离大盒子的offsetLeft = pageX - 大盒子的offsetLeft - offsetX
<style>
* {
margin: 0;
padding: 0;
}
#bigBox {
width: 1000px;
height: 600px;
margin: 50px auto;
position: relative;
background-color: #2ecc71;
}
#smallBox {
width: 50px;
height: 50px;
background-color: #c0392b;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function() {
//1. 获取元素节点
var smallBox = document.getElementById("smallBox");
var bigBox = document.getElementById("bigBox");
// 2.准备一个开关变量 开（true）的时候可以移动，关（false）的时候停止移动
var flag = false;
smallBox.addEventListener("mousedown", function() {
flag = true;
});
smallBox.addEventListener("mouseup", function() {
flag = false;
});
bigBox.addEventListener("mousemove", function(event) {
var event = event || window.event;
if (!flag) {
return;
}
var x = event.pageX - bigBox.offsetLeft - smallBox.offsetWidth / 2;
var y = event.pageY - bigBox.offsetTop - smallBox.offsetHeight / 2;
// 有两个问题 一个是范围 一个是移动过快，小盒子丢失目标
if (x <= 0) {
x = 0;
}
if (y <= 0) {
y = 0;
}
if (x >= bigBox.offsetWidth - smallBox.offsetWidth) {
x = bigBox.offsetWidth - smallBox.offsetWidth;
}
if (y >= bigBox.offsetHeight - smallBox.offsetHeight) {
y = bigBox.offsetHeight - smallBox.offsetHeight;
}
//让盒子移动
smallBox.style.left = x + "px";
smallBox.style.top = y + "px";
})
}
</script>
</head>
<body>
<div id="bigBox">
<div id="smallBox"></div>
</div>
</body>
3.拖拽盒子（方法二）
<style>
* {
margin: 0;
padding: 0;
}
#bigBox {
width: 1000px;
height: 600px;
margin: 50px auto;
position: relative;
background-color: #2ecc71;
}
#smallBox {
width: 50px;
height: 50px;
background-color: #c0392b;
position: absolute;
left: 0;
top: 0;
}
</style>
<script>
window.onload = function() {
//1. 获取元素节点
var smallBox = document.getElementById("smallBox");
var bigBox = document.getElementById("bigBox");
smallBox.addEventListener("mousedown", function(event) {
var offX = event.offsetX;
var offY = event.offsetY;
bigBox.onmousemove = function(event) {
var event = event || window.event;
var x = event.pageX - bigBox.offsetLeft - offX;
var y = event.pageY - bigBox.offsetTop - offY;
if (x <= 0) {
x = 0;
}
if (y <= 0) {
y = 0;
}
if (x >= bigBox.offsetWidth - smallBox.offsetWidth) {
x = bigBox.offsetWidth - smallBox.offsetWidth;
}
if (y >= bigBox.offsetHeight - smallBox.offsetHeight) {
y = bigBox.offsetHeight - smallBox.offsetHeight;
}
//让盒子移动
smallBox.style.left = x + "px";
smallBox.style.top = y + "px";
}
});
smallBox.addEventListener("mouseup", function() {
bigBox.onmousemove = null;
})
}
</script>
</head>
<body>
<div id="bigBox">
<div id="smallBox"></div>
</div>
4.滑动解锁
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 60px;
border: 1px solid grey;
background-color: #e5e5e5;
margin: 200px auto;
}
.lock {
width: 30px;
height: 60px;
background-color: #1abc9c;
}
.btn {
width: 30px;
height: 60px;
background-color: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
float: right;
}
</style>
<script>
window.onload = function() {
function $(str) {
return document.querySelector(str);
}
var box = $(".box");
var lock = $(".lock");
var btn = $(".btn");
var flag = false;
var ox = 0;
btn.onmousedown = function(event) {
flag = true;
//获取鼠标按下时，相对于小盒子的位置。
ox = event.offsetX;
}
document.onmouseup = function() {
flag = false;
ox = 0;
lock.style.width = btn.offsetWidth + "px";
lock.style.transition = "all 0.5s";
}
box.onmousemove = function(event) {
// 判断开关是否开启
if (!flag) {
return;
}
var width = event.pageX - box.offsetLeft - ox + btn.offsetWidth;
if (width >= box.offsetWidth) {
width = box.offsetWidth;
//加上延时，避免过渡效果造成影响
setTimeout(function() {
alert("解锁成功！");
}, 20);
//解锁成功，则解绑事件
document.onmouseup = null;
box.onmousemove = null;
}
lock.style.width = width + "px";
lock.style.transition = "none";
}
}
</script>
</head>
<body>
<div class="box">
<div class="lock">
<div class="btn"></div>
</div>
</body>
5.滑动解锁百分比
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 400px;
height: 20px;
border: 1px solid grey;
background-color: #e5e5e5;
margin: 200px auto;
position: relative;
}
.lock {
width: 30px;
height: 20px;
background-color: #1abc9c;
display: inline-block;
}
.btn {
width: 30px;
height: 20px;
background-color: #fff;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
float: right;
cursor: pointer;
user-select: none;
}
p {
display: block;
position: absolute;
top: 0;
left: 50%;
margin-left: -40px;
user-select: none;
}
</style>
<script>
window.onload = function() {
function $(str) {
return document.querySelector(str);
}
var box = $(".box");
var lock = $(".lock");
var btn = $(".btn");
var sp = $(".sp");
var p = document.getElementsByTagName("p")[0];
var flag = false;
var ox = 0;
btn.onmousedown = function(event) {
flag = true;
//获取鼠标按下时，相对于小盒子的位置。
ox = event.offsetX;
}
document.onmouseup = function() {
flag = false;
ox = 0;
// lock.style.width = btn.offsetWidth + "px";
// lock.style.transition = "all 0.5s";
}
box.onmousemove = function(event) {
// 判断开关是否开启
if (!flag) {
return;
}
var width = event.pageX - box.offsetLeft - ox + btn.offsetWidth;
if (width >= box.offsetWidth) {
width = box.offsetWidth;
//加上延时，避免过渡效果造成影响
// setTimeout(function() {
// alert("解锁成功！");
// }, 20);
//解锁成功，则解绑事件
p.innerHTML = "解锁成功";
document.onmouseup = null;
box.onmousemove = null;
}
//防止向后拖动
if (width - btn.offsetWidth <= 0) {
width = btn.offsetWidth;
}
lock.style.width = width + "px";
// lock.style.transition = "none";
var boxlength = box.offsetWidth - btn.offsetWidth;
var locklength = width - btn.offsetWidth;
var rate = Math.floor(locklength / boxlength * 100);
btn.innerHTML = rate + "%";
}
}
</script>
</head>
<body>
<div class="box">
<div class="lock">
<div class="btn">0%
</div>
</div>
<p>滑动解锁</p>
</div>
</body>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
