MouseEvent.preventDefault.html (3174B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title id='desc'> MouseEvent: mousedown - preventDefault() for text selection </title> 5 <script type="text/javascript"> 6 var PassTest = function() 7 { 8 document.getElementById("testresult").firstChild.data = "PASS"; 9 } 10 11 var FailTest = function() 12 { 13 document.getElementById("testresult").firstChild.data = "FAIL"; 14 } 15 16 var EVENT1 = "mousedown"; 17 var EVENT2 = "mouseup"; 18 var TARGET; 19 var DisableSelection = false; 20 var DefaultPrevented = false; 21 var BEFORE = 0; 22 var AFTER = 0; 23 24 function DisableTextSelection() 25 { 26 DisableSelection = true; 27 } 28 29 function TestEvent(evt) 30 { 31 if ((true == DisableSelection) && (EVENT1 == evt.type)) 32 { 33 evt.preventDefault(); 34 DefaultPrevented = true; 35 BEFORE = evt.clientX; 36 } 37 if ((true == DisableSelection) && (EVENT2 == evt.type)) 38 { 39 AFTER = evt.clientX; 40 } 41 } 42 43 function VerifyResult() 44 { 45 var distance = Math.abs(AFTER - BEFORE); 46 47 if ((true == DefaultPrevented) && (10 < distance) && ("" == window.getSelection())) 48 { 49 PassTest() 50 } 51 else 52 { 53 FailTest(); 54 } 55 } 56 57 window.onload = function() 58 { 59 try 60 { 61 TARGET = document.getElementById("target"); 62 TARGET.addEventListener(EVENT1, TestEvent, false); 63 TARGET.addEventListener(EVENT2, TestEvent, false); 64 } 65 catch(ex) 66 { 67 FailTest(); 68 } 69 } 70 </script> 71 </head> 72 <body> 73 <h3>DOM Events</h3> 74 <h4> 75 Test Description: MouseEvent - Text selection is disabled after cancelling mousedown event. 76 </h4> 77 78 <span id="target" style="border:1px solid green; color:blue"> Use mouse to select the whole line here </span> 79 80 <p id="manualsteps"> 81 Steps: 82 <ol> 83 <li> Make sure text in the above green box can be selected using mouse 84 <li> Dismiss the selection, if any, by clicking at the green box with mouse 85 <li> Now, click the button: <button onclick="DisableTextSelection()">Disable Selection</button> 86 <li> Drag mouse to select the whole line of the text inside the above green box 87 <li> Click the button: <button id="verify" onclick="VerifyResult()">VerifyResult</button> 88 </ol> 89 </p> 90 <p>Test passes if the word "PASS" appears below after following the above steps.</p> 91 <div>Test result: </div> 92 <div id='testresult'>FAIL</div> 93 </body> 94 </html>