CodingForums.com - should I return false? and what happened to the click?

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - should I return false? and what happened to the click? (http://www.codingforums.com/showthread.php?t=285692)

should I return false? and what happened to the click?

hello,

I'm working on a greasemonkey script that has a form (that isn't really a form, but just a collection of inputs - otherwise I guess I would be using beforesubmit) which is submitted somehow (dunno how, hoping not to have to find out) on the click of a button.

What I want to do is do a validation on the "form" before it gets sent. I struggled for a while because I was adding a click listener to the button (making the validation happen after the info was sent), but I realised that using "mousedown" I get to sneak in, and do the validation. I then just programatically click the submit button and away it goes.

Which is great. Works fine on my machine, anyway. But I have two doubts. A validation error brings up a confirm. If you click OK, the form sends. If you click cancel it doesn't. But shouldn't there be a return false in there somewhere, even though you would be returning false from the mousedown which I guess is unrelated to the click?

And that's the second question: The way I understand it, the event order is mousedown, click, mouseup. So what happens to the click event? Does it die while the confirm box is showing?

Here's a very basic example which demonstrates this. It's in jQuery because the page uses jQuery and I have to attach listeners to the dynamically created button (which I have no control over) - I know I can do that in vanilla, but it's just easier this way. But anyway, this isn't a jQuery question - the jQuery works fine. What I'm asking is how the javascript works here. More than anything, why don't I need to be canceling the click event in some way?

Any thoughts much appreciated.

Code:

<html>

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 

</head>



<body>

<input type="button" id="start" value="show form"/> 

<script type="text/javascript">

$(document).ready(function () {



    // these bits get done by the page - I have no control at this point



    $("#send").live("click", function () {

        $('#theform').remove();

                alert("form sent!");

    });



    $("#start").click(function () {

        $('body').append('<div id="theform"><input type="checkbox" id="cb"/>Check me or you\'ll get an alert<br>' +

            '<input type="button" id="send" value="send form"/></div>')

    });



    // this is where the greasemonkeying starts



    $("#send").live("mousedown", function () {

        if (!($("#cb").is(":checked"))) {

                if (confirm("You didn't check the box! Sure you want to continue?")) {

                $("#send").click();

            }

        }

    });



});



</script>

</body>

</html>

Code:

if (confirm("You didn't check the box! Sure you want to continue?")) {

The confirm returns true or false, so this could be written:

Code:

if (confirm("You didn't check the box! Sure you want to continue?") == true) {

Yes, the click event is absorbed by the confirm dialog. [As I recall, it wasn't always; I believe some browsers used to propagate it - that is, pass it on.]

Quote:

Originally Posted by xelawho (Post 1305841)

And that's the second question: The way I understand it, the event order is mousedown, click, mouseup. So what happens to the click event? Does it die while the confirm box is showing?

how can a click occur before the mouse button goes up? Note that if you click a button, then drag to ,say the desktop, and release the button, click() is not fired.

i don't think you can actually terminate/prevent a click() from a mousedown...

the reason confirm/alert help is that it prevents the mouseup on the element with the click() event, thus ensuring that the button is not actually clicked.

also , this test app shows this output:

Code:

EVT: mousedown

EVT: mouseup

EVT: click

you may want to stop pulling your hair; i found this text on the jQuery site:

Quote:

Since the .live() method handles events once they have propagated to the top of the document, it is not possible to stop propagation of live events. Similarly, events handled by .delegate() will propagate to the elements to which they are delegated; event handlers bound on any elements below it in the DOM tree will already have been executed by the time the delegated event handler is called. These handlers, therefore, may prevent the delegated handler from triggering by calling event.stopPropagation() or returning false.

Quote:

Originally Posted by rnd me (Post 1305873)

this test app shows this output:

Code:

EVT: mousedown

EVT: mouseup

EVT: click

Interesting. I figured it was otherwise for some reason. I should really look some of this stuff up. But as long as nobody uses mousedown, my reign of greasemonkeying terror can continue.

So, nobody use mousedown, please :D

There was no hair-pulling going on. That it works is good enough for me. That it should work on non-windows OSs is even better. Thanks again for the info :thumbsup: