javascript drag()拖拽

最新推荐文章于 2023-03-04 23:18:04 发布
原创最新推荐文章于 2023-03-04 23:18:04 发布 · 1.3k 阅读
0 ·
CC 4.0 BY-SA版权
本文深入探讨了网页中各种事件的处理方法，包括不同浏览器的兼容性处理、事件处理程序的注册与移除、事件冒泡与捕获机制、事件对象的使用等。此外，还介绍了如何实现元素的拖动功能。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html
lang="en">

<head>
<title>事件类型</title>
<meta
charset="UTF-8">
<meta
name="viewport"
content="width=device-width, initial-scale=1">
<script
src="js/jquery.js"></script>
<style>
.div1 {
position:
absolute;
left:
100px;
top:
100px;
width:
250px;
background-color:
white;
border:
1px 
solid gray;
}
.div2 {
background-color:
gray;
border-bottom:
1px 
dotted black;
padding:
3px;
font-family: snas-serif;
font-weight:
bold;
}
</style>
</head>

<body>
<div
class="shipping_address"></div>
<form
id="shipping_address"></form>
<button
id="mybutton">click me</button>
<button
id="testButton">click me again</button>
<button
id="addBtn"
onclick="addBtn()">add</button>
<p
class="pNumber">0</p>
<!-- <img src="image/assistant-loading.jpg" style="position:absolute;left:100px;top:100px;" onmousedown="if(event.shiftKey) drag(this.event)" id="img" /> -->
<!-- <img src="image/assistant-loading.jpg" id="img1" style="position:absolute;" /> -->
<div
class="div1">
<div
class="div2"
onmousedown="drag(this.parentNode,event)">拖动我</div>
<p>这是一个测试，这是一个测试，</p>
</div>


<script>
window.onload
= function() {
// 查找一个form元素
var elt
= document.getElementById("shipping_address");
// 注册一个处理程序函数
elt.onsubmit
= function() {
return
validata(this);
}
};
// addEventListener
var b
= document.getElementById("mybutton");
b.onclick
= function() {
console.log("click");
};
b.addEventListener("click",
function() {
console.log("hello world");
}, false);
// 事件处理程序移除代码
// document.removeEventListener();
document.removeEventListener("mousemove",
function() {},
true);

// ie浏览器的事件处理
var b
= document.getElementById("mybutton");
var
handler 
= function() {
console.log("ie事件处理程序");
};
if (b.addEventListener)
b.addEventListener("click",
 handler, false);
else
if (b.attachEvent)
b.attachEvent("onclick",
 handler);

//事件处理程序参数
function
handler(event) {
event
= event
|| window.event;
//处理程序代码 
}
//事件处理程序的运行环境
var e
= document.getElementById("mybutton");
e.onclick
= function() {};


function
addEvent(target,
type, 
handler) {
if (target.addEventListener)
target.addEventListener(type, handler,
false);
else
target.attachEvent("on"
+ type, 
function(event) {
// 把处理程序作为事件目标的方法调用
// 传递事件对象
return
handler.call(target,
event);
});
};
var btn1
= document.getElementById("testButton");
var type
= "click";
var
handler 
= function() {
console.log("the world is very beautiful");
};
addEvent(btn1, type, handler);
// 事件处理程序的作用域
// 调用顺序：
// 事件取消preventDefault(),取消事件的默认操作；
function
cancelHandler(event) {
// 用于ie
var
event 
= event
|| window.event;
//这里是处理事件的代码
if (event.preventDefault)
event.preventDefault();
//标准技术
if (event.returnValue)
event.returnValue
= false;
return
false;
};

// 文档加载事件
// 当文档准备就绪是调用函数
/*
*传递给whenReady(),当文档解析完毕且为操作准备就绪时
*函数将作为文档对象的方法调用
*DOMContentLoad readystatechange or load事件发生时会触发注册函数
*一旦文档准备就绪时，所有的函数都会被调用，任何传递给whenReady()的函数都将立即调用
*/
var whenReady
= (function() {
var funcs
= [];
var ready
= false;

function
handler(e) {
if (ready)
return;
if (e.type
=== 
"readystatechange"
&& document.readyState
!== 
"complete")
return;

for (var i
= 0; i
< funcs.length; i++)
funcs[i].call(document);
ready =
true;
funcs =
null;
};
if (document.addEventListener)
 {
document.addEventListener("DOMContentLoaded",
 handler, false);
document.addEventListener("DOMContentLoaded",
 handler, false);
window.addEventListener("load",
 handler, false);
} else
if (document.attachEvent) {
document.attachEvent("onreadystatechange",
 handler);
window.attachEvent("onload",
 handler);
};
return
function 
whenReady(f) {
if (ready)
f.call(document);
else
funcs.push(f);
}
}());

var number1
= 0;
var firstNumber
= document.getElementsByClassName("pNumber")[0];

function
addBtn1() {
number1++;
firstNumber.textContent
= number1;
if (firstNumber.textContent
>= 11) {
number1 =
10;
alert("每天最多只能点10个赞");
firstNumber.textContent
= 10;
}
};
//拖动文档元素
// drag()函数，它用于mousedown事件处理程序的调用
//elementToDrag：接收mousedown事件的元素或其他某些包含元素，它必须是绝对定位的元素
// 它的style.left and style.top值随用户的拖动而改变
// function getScrollOffsets(e) {
// console.log([
// e.width,
// e.height
// ]);

// };
// var e = document.getElementById("img");
// // console.log(e);
// getScrollOffsets(e);





//查询窗口滚动条的位置 
function
getScrollOffsets(w) {
w = w
|| window;
if (w.pageXOffset
!= null)
return {
x:
w.pageXOffset,
y:
w.pageYOffset
};
var d
= w.document;
if (document.compatmode
== "CSS1Compat")
return {
x:
d.documentElement.scrollLeft,
y:
d.documentElement.scrollTop
};
};

function
drag(elementToDrag,
event) {
// 初始鼠标的位置
var scroll
= getScrollOffsets();
var startX
= event.clientX
+ scroll.x;
var startY
= event.clientY
+ scroll.y;
// 在文档坐标下，待拖动元素的初始位置
// 因为elementToDrag是绝对定位的
// 所以假设它的offsetParen就是文档的body元素
var origX
= elementToDrag.offsetLeft;
var origY
= elementToDrag.offsetTop;
// 计算mousedown事件和元素左上角的距离
var deltaX
= startX 
- origX;
var deltaY
= startY 
- origY;
// 注册用于相应接着mousedown事件发生的mousemove和mouseup事件的事件处理程序
if (document.addEventListener)
 {
document.addEventListener("mousemove",
 moveHandler, true);
document.addEventListener("mouseup",
 upHandler, true);
} else
if (document.attachEvent) {
elementToDrag.setCapture();
elementToDrag.attachEvent("onmousemove",
 moveHandler);
elementToDrag.attachEvent("onmouseup",
 upHandler);
// 作为mouseup事件看待鼠标捕获的丢失
elementToDrag.attachEvent("onlosecapture",
 upHandler);
};
// 我们处理这个事件，不让任何其他元素看到他
if (event.stopPropagation)
 {
event.stopPropagation();
} else {
event.cancelBubble
= true;
};
// 现在阻止任何默认操作
if (event.preventDefault)
 {
event.preventDefault();
} else {
event.returnValue
= false;
};
// 当元素正在被拖动是，它就是捕获mousemove事件的处理程序
// 它用于移动这个元素
function
moveHandler(e) {
if (!e) {
e =
window.event;
};
var scroll
= getScrollOffsets();
elementToDrag.style.left
= (e.clientX
+ scroll.x
- deltaX) 
+ "px";
elementToDrag.style.top
= (e.clientY
+ scroll.y
- deltaY) 
+ "px";
if (event.stopPropagation)
 {
event.stopPropagation();
} else {
event.cancelBubble
= true;
};
};
// 这里捕捉得失拖动结束时发生的最终mouseup事件的处理程序
function
upHandler(e) {
if (!e) {
e =
window.event;
};
if (document.removeEventListener)
 {
document.removeEventListener("mouseup",
 upHandler, true);
document.removeEventListener("mousemove",
 moveHandler, true);
} else
if (document.detachEvent) {
elementToDrag.detachEvent("onlosecapture",
 upHandler);
elementToDrag.detachEvent("onmouseup",
 upHandler);
elementToDrag.detachEvent("onmousemove",
 moveHandler);
elementToDrag.repleaseCapture();
}
if (e.stopPropagation)
 {
e.stopPropagation();
} else {
e.cancelBubble
= true;
};
}
};
</script>
</body>

</html>