How to hide form by mouse click beyond the form area withou JQuery

Question

I've the follwoing form:

<form method="get">
<!-- This is form's content -->
</form>

I want to hide the form by mouse click beyond the form area. I'm trying to set window.onclick event handler but this handler is override others onlcick handler on my page. I need to do this WITHOUT JQUERY . Thanks.

Answer 1

Give your form an Id and add use e.target.id in addEventListener :

<form method="get" id="myform">
<!-- This is form's content -->
Dummy content
</form>
<script>
    window.onclick = function(e) {
        alert('other handlers');
    }
    window.addEventListener('click', function(e) {
        if (e.target.id != "myform") {
            document.getElementById('myform').style.display = 'none';
        }
    });
</script>

Working demo: http://jsfiddle.net/6bewY/