5

I am conducting some Psych experiment on web design, and I want to disable both mouse clicks. (Please ignore usability issues. I know about them. I intentionally do this for the purpose of my psych experiment.)

So far I succeeded disabling both clicks in Firefox, Chrome, and Safari. In IE, however, when I left click, focus still changes to the place I clicked. I want to stop this behavior (i.e. focus remains the place before I click). It doesn't matter whether the system produces alert or not, because I'm going to use alert anyway.

I appreciate if some of you can help me. Please note that I CAN'T use JQuery. My experiment tool cannot handle JQuery well.

<html>
    <head>
    </head>
    <body>
        <div>
            <select>
                <option> aa </option>
            </select>
        </div>
        <div>
            <select>
                <option> aa </option>
            </select>
        </div>

        <script type="text/javascript">

             function mousehandler(){
                alert("For the purpose of psych experiment, you can't use mouse.");
                return false;   
             }
             document.oncontextmenu = mousehandler;
             document.onmousedown = mousehandler;
        </script>
    </body>
</html>
user605660
  • 199
  • 2
  • 2
  • 7
  • isn't that code working for you? – Santosh Linkha Feb 21 '11 at 07:15
  • Thanks for comments. Andrew > We are going to conduct the online experiment. Thus, we do not have a control on whether users plug/unplug the mouse. experimentX > No, it doesn't on IE8, at least. If the focus is on the second select, and if I click on the first select, focus switches to the first select. I want the focus stay on the second select (which happens in other browsers). – user605660 Feb 21 '11 at 07:40

1 Answers1

1

Not sure why IE8 is doing this but if you are setting the second select to have focus when the page loads, then in your mousehandler() function if you add setTimeout(function(){document.getElementsByTagName("select")[1].focus();},1); before the return false you can give the second select it's focus back. It then appears that it never lost focus to the first select.

The reason for setTimeout() is because without it the first select will gain focus.

function mousehandler(){
    alert("For the purpose of psych experiment, you can't use mouse.");
    setTimeout(function(){document.getElementsByTagName("select")[1].focus();},1);
    return false;   
}

EDIT: jsFiddle example

Nalum
  • 3,963
  • 5
  • 37
  • 54
  • Thanks Nalum!! That works!! For people who may wonder how to figure out which element had the original focus, use document.activeElement and set focus to that element in the timer. This should work for all major browsers. Also, see [link](http://stackoverflow.com/questions/483741/how-to-determine-which-html-page-element-has-focus) – user605660 Feb 21 '11 at 17:26
  • No problem and thanks for `document.activeElement`, I didn't know about that little nugget. – Nalum Feb 22 '11 at 08:53