Default behavior: What is the default behavior: The default behavior is the event that the browser itself triggers. For example: a link jump, form submission jump, right-click jump;
Oncontexmenu when right click menu;
return false
Blocking default behavior
if(e.preventDefault) {
e.preventDefault();
}else {
window.event.returnValue = false;
}
Event removed. document.onmouseover=null;
Drag and drop
Drag events:
onmousedown onmousemove onmouseup
Drag thinking:
1. Add the onMouseDown event to the target element by holding down the left mouse button
2. When onMouseDown occurs, add the onMousemove event to the document at this point, meaning that any mouse movement on the page will change the location of the target element
3. In the onMousemove event, set the left and top of the target elements.
The formula
Left of the target element = clientX of the mouse — (the difference between the mouse and the element’s abscissa, i.e., offsetX)
Top of the target element = clientY of the mouse — (the difference between the mouse and the element’s ordinate, i.e., offsetY)
4. Add the onMouseup event to the document after the onMouseDown event occurs, which means that when the mouse is released anywhere on the page, the drag effect will be abandoned
In the onMouseup event, cancel the Document onMousemove event.
The event triggering stage is mainly due to the event flow: DOM0 level event processing stage and DOM2 level event processing stage;
DOM0 level event processing, is a way of assigning value, is supported by all browsers, easy to understand and easy to operate;
Dom2-level event handling is a method in all DOM nodes that can be repeatedly bound, but browser compatibility is problematic;
Under non-IE (where the event name is not on), the third parameter indicates whether it is in the capture or bubbling phase. Binding events can be repeated in the order in which they are bound.
oDiv.addEventListener(‘click’,chick,false);
oDiv.removeEventListener(‘click’,chick ,false);
IE:
There’s only the bubble phase, so there’s no third parameter; (Add on to the event name here)
ODiv. AttachEvent ();
oDiv.detachEvent() ;
Compatibility problem solving:
var EventUtil={
addHandler:function(DOM,EventType,fn){
if(DOM.addEventListener){
DOM.addEventListener(EventType,fn,false);
}else if(DOM.attachEvent){
DOM.attachEvent(‘on’+EventType,fn)
}else{
DOM[‘on’+EventType]=fn
}
},
removeHandler:function(DOM,EventType,fn){
if(DOM.removeEventListener){
DOM.removeEventListener(EventType,fn,false)
}else if(DOM.detachEvent){
DOM.detachEvent(‘on’+EventType,fn)
}else{
DOM[‘on’+EventType]=null;
}
}
}
Write a perfect drag-and-drop example:
<! DOCTYPE html>
<html>
<title> Perfect drag </title>
<style type=”text/css”>
html,body{overflow:hidden; }
body,div,h2,p{margin:0; padding:0; }
body{color:#fff; background:#000; font:12px/2 Arial; }
p{padding:0 10px; margin-top:10px; }
span{color:#ff0; padding-left:5px; }
#box{position:absolute; width:300px; height:150px; background:#333; border:2px solid #ccc; top:50%; left:50%; margin:-75px 0 0 -150px; }
#box h2{height:25px; cursor:move; background:#222; border-bottom:2px solid #ccc; text-align:right; padding:0 10px; }
#box h2 a{color:#fff; font:12px/25px Arial; text-decoration:none; outline:none; }
</style>
<script type=”text/javascript”>
window.onload=function(){
var positionArray = [];
var box = document.getElementById(“box”);
box.onmousedown = function(evt){
positionArray = [];
var x = evt.offsetX;
var y = evt.offsetY;
document.onmousemove = function(evt){
box.style.left = evt.clientX – x + “px”;
box.style.top = evt.clientY – y + “px”;
console.log({left:box.offsetLeft, top: box.offsetTop})
positionArray.push({left:box.offsetLeft, top: box.offsetTop});
}
}
box.onmouseup = function(){
document.onmousemove = null;
}
box.children[0].firstChild.onmousedown = function(evt){
evt.stopPropagation();
}
box.children[0].firstChild.onclick = function(){
console.log(positionArray.length);
var index = positionArray.length-1;
var timer = setInterval(function(){
if(index < 0) {
clearInterval(timer);
return;
}
box.style.left = positionArray[index–].left+”px”;
box.style.top = positionArray[index–].top+”px”;
}, 30);
}
};
</script>
</head>
<body>
<div id=”box” style=”margin-left: 0px; margin-top: 0px; left: 533px; top: 231px;” >
<h2><a href=”javascript:;” </a></h2>
<p><strong>Drag:</strong><span>false</span></p>
<p><strong>offsetTop:</strong><span>231</span></p>
<p><strong>offsetLeft:</strong><span>533</span></p>
</div>
</body></html>