firefox screen issue with click() method

The question has to do with Firefox refreshing the browser window to 100% when a function is called. If the browser view is at say, 75%, and I use .click method on a link - the page refreshes at 100% THEN the function executes. Safari executes the function without refreshing the window.

The code now looks like:

function hideFlag(){

   开发者_JS百科 $("#ftm").click(function () { 

    var stageWidth = $("#window_div").width();
    if (stageWidth <= 1200){

        $( "#window_div" ).animate({
            width: 1250,
          opacity: ".8",
        }, 1000 );
        $( "#flagDiv" ).animate({
          opacity: "0",
          }, 1000 ); 
        }
    else{
        $( "#window_div" ).animate({
        width: 500,
        opacity: ".6",
        }, 1000 );
        $( "#flagDiv" ).animate({
        opacity: "1",
        }, 1000 );
        }   
    });
}

In Firefox, if my browser view is zoomed out to 75% and I replace the .click() method with .mouseenter, the divs animate without the screen redrawing or resizing on mouseenter. I don't understand the difference between the click() and mouseenter() implementations.

Solved it.

It was far simpler than I thought. Proper use of the "return false;" argument on the click method solved my problem. Revised code is as follows:

function hideFlag(){

            $("#ftm").click(function () { 
                var stageWidth = $("#window_div").width();
                if (stageWidth <= 1200){
                    $( "#window_div" ).animate({
                        width: 1250, 
                        opacity: ".8", 
                        }, 1000 ); return false;
                    $( "#flagDiv" ).animate({
                        opacity: "0",
                        }, 1000 ); return false;
                    }
                else{
                    $( "#window_div" ).animate({
                        width: 500, 
                        opacity: ".6", 
                    }, 1000 );return false;
                    $( "#flagDiv" ).animate({
                        opacity: "1", 
                    }, 1000 );return false;
                }   
            });
}

Thanks all for the help.

^{Not that this a direct answer to your question, but it's rather long for a comment.}

You're using jQuery. I think you're missing the point of the whole cross-browser-library thing. Change

stageWidth = document.getElementById("window_div").clientWidth

to

stageWidth = $("#window_div").width()

no browser-specific code needed. There also no need for that addEventHandler function when using jQuery. It takes care of the differences between browsers so that you don't have to. That means you can change the setUpClickHandler function to this:

function setUpClickHandler() {
    $('#ftm').click(hideFlag);
    $('#ath').click(showFlag);
}

and change showFlag to this:

function showFlag(e){
    $('#flagDiv').show();
}

and change

addEventHandler(window, "load", setUpClickHandler, false);

to

$(window).load(setUpClickHandler);