mirror of
https://github.com/servo/servo
synced 2026-04-29 02:47:55 +02:00
102 lines
2.5 KiB
HTML
102 lines
2.5 KiB
HTML
<!DOCTYPE html>
|
||
<meta charset='utf-8'>
|
||
<title>drag & drop – events should not fire with non-draggable elements – 002</title>
|
||
<style type="text/css">
|
||
div {
|
||
height: 200px;
|
||
width: 200px;
|
||
background-color: orange;
|
||
position: absolute;
|
||
top: 8px;
|
||
left: 8px;
|
||
}
|
||
div + div {
|
||
background-color: navy;
|
||
left: 250px;
|
||
}
|
||
|
||
div + p {
|
||
margin-top: 220px;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
window.onload = function() {
|
||
|
||
var orange = document.getElementsByTagName('div')[0];
|
||
var blue = document.getElementsByTagName('div')[1];
|
||
var body = document.body;
|
||
|
||
var pass = true;
|
||
|
||
function fail() {
|
||
pass = false;
|
||
}
|
||
|
||
body.addEventListener('drag',fail,false);
|
||
body.addEventListener('dragend',fail,false);
|
||
body.addEventListener('dragenter',fail,false);
|
||
body.addEventListener('dragleave',fail,false);
|
||
body.addEventListener('dragover',fail,false);
|
||
body.addEventListener('dragstart',fail,false);
|
||
body.addEventListener('drop',fail,false);
|
||
|
||
body.ondrag = fail;
|
||
body.ondragend = fail;
|
||
body.ondragenter = fail;
|
||
body.ondragleave = fail;
|
||
body.ondragover = fail;
|
||
body.ondragstart = fail;
|
||
body.ondrop = fail;
|
||
|
||
orange.addEventListener('drag',fail,false);
|
||
orange.addEventListener('dragend',fail,false);
|
||
orange.addEventListener('dragenter',fail,false);
|
||
orange.addEventListener('dragleave',fail,false);
|
||
orange.addEventListener('dragover',fail,false);
|
||
orange.addEventListener('dragstart',fail,false);
|
||
orange.addEventListener('drop',fail,false);
|
||
|
||
orange.ondrag = fail;
|
||
orange.ondragend = fail;
|
||
orange.ondragenter = fail;
|
||
orange.ondragleave = fail;
|
||
orange.ondragover = fail;
|
||
orange.ondragstart = fail;
|
||
orange.ondrop = fail;
|
||
|
||
blue.addEventListener('drag',fail,false);
|
||
blue.addEventListener('dragend',fail,false);
|
||
blue.addEventListener('dragenter',fail,false);
|
||
blue.addEventListener('dragleave',fail,false);
|
||
blue.addEventListener('dragover',fail,false);
|
||
blue.addEventListener('dragstart',fail,false);
|
||
blue.addEventListener('drop',fail,false);
|
||
|
||
blue.ondrag = fail;
|
||
blue.ondragend = fail;
|
||
blue.ondragenter = fail;
|
||
blue.ondragleave = fail;
|
||
blue.ondragover = fail;
|
||
blue.ondragstart = fail;
|
||
blue.ondrop = fail;
|
||
|
||
body.onmouseup = function () {
|
||
setTimeout(function () {
|
||
if (pass == true) {
|
||
document.body.innerHTML = 'PASS';
|
||
} else {
|
||
document.body.innerHTML = 'FAIL';
|
||
}
|
||
}, 100 );
|
||
};
|
||
|
||
}
|
||
</script>
|
||
|
||
<div></div>
|
||
<div></div>
|
||
|
||
<p>Use your pointing device to drag from the orange box to the blue box. The
|
||
word "PASS" should appear.
|