tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

events-non-draggable-002-manual.html (2563B)

      1 <!DOCTYPE html>
      2 <meta charset='utf-8'>
      3 <title>drag &amp; drop – events should not fire with non-draggable elements – 002</title>
      4 <style type="text/css">
      5  div {
      6    height: 200px;
      7    width: 200px;
      8    background-color: orange;
      9    position: absolute;
     10    top: 8px;
     11    left: 8px;
     12  }
     13  div + div {
     14    background-color: navy;
     15    left: 250px;
     16  }
     17 
     18  div + p {
     19    margin-top: 220px;
     20  }
     21 </style>
     22 
     23 <script>
     24 window.onload = function() {
     25 
     26  var orange = document.getElementsByTagName('div')[0];
     27  var blue = document.getElementsByTagName('div')[1];
     28  var body = document.body;
     29 
     30  var pass = true;
     31 
     32  function fail() {
     33    pass = false;
     34  }
     35 
     36  body.addEventListener('drag',fail,false);
     37  body.addEventListener('dragend',fail,false);
     38  body.addEventListener('dragenter',fail,false);
     39  body.addEventListener('dragleave',fail,false);
     40  body.addEventListener('dragover',fail,false);
     41  body.addEventListener('dragstart',fail,false);
     42  body.addEventListener('drop',fail,false);
     43 
     44  body.ondrag = fail;
     45  body.ondragend = fail;
     46  body.ondragenter = fail;
     47  body.ondragleave = fail;
     48  body.ondragover = fail;
     49  body.ondragstart = fail;
     50  body.ondrop = fail;
     51 
     52  orange.addEventListener('drag',fail,false);
     53  orange.addEventListener('dragend',fail,false);
     54  orange.addEventListener('dragenter',fail,false);
     55  orange.addEventListener('dragleave',fail,false);
     56  orange.addEventListener('dragover',fail,false);
     57  orange.addEventListener('dragstart',fail,false);
     58  orange.addEventListener('drop',fail,false);
     59 
     60  orange.ondrag = fail;
     61  orange.ondragend = fail;
     62  orange.ondragenter = fail;
     63  orange.ondragleave = fail;
     64  orange.ondragover = fail;
     65  orange.ondragstart = fail;
     66  orange.ondrop = fail;
     67 
     68  blue.addEventListener('drag',fail,false);
     69  blue.addEventListener('dragend',fail,false);
     70  blue.addEventListener('dragenter',fail,false);
     71  blue.addEventListener('dragleave',fail,false);
     72  blue.addEventListener('dragover',fail,false);
     73  blue.addEventListener('dragstart',fail,false);
     74  blue.addEventListener('drop',fail,false);
     75 
     76  blue.ondrag = fail;
     77  blue.ondragend = fail;
     78  blue.ondragenter = fail;
     79  blue.ondragleave = fail;
     80  blue.ondragover = fail;
     81  blue.ondragstart = fail;
     82  blue.ondrop = fail;
     83 
     84  body.onmouseup = function () {
     85    setTimeout(function () {
     86      if (pass == true) {
     87        document.body.innerHTML = 'PASS';
     88      } else {
     89        document.body.innerHTML = 'FAIL';
     90      }
     91    }, 100 );
     92  };
     93 
     94 }
     95 </script>
     96 
     97 <div></div>
     98 <div></div>
     99 
    100 <p>Use your pointing device to drag from the orange box to the blue box. The
    101 word &quot;PASS&quot; should appear.