Javascript运行onload而不是onclick

时间:2011-12-19 22:38:43

标签: javascript jquery onclick

我需要我的代码才能运行onclick而不是onload。我想我必须设置var Delay = to -1;,但还有什么?我见过这段代码:

<a href="#" onClick="javascript:initGateway(); return false;">Click here</a> 

但我不知道如何使用它,或者它在哪里。

<!-- This goes in the head -->

<style>
A.yourlinkclass {
        font-family: Arial;
        color: #CCCCCC;
        text-decoration: none;
        font-size: 13px;
        font-weight:;
}

A.yourlinkclass:hover {
        font-family: Arial;
        color: #CCCCCC;
        text-decoration: underline;
        font-size: 13px;
        font-weight:;
}
</style>


<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

    var Delay = 10;//Seconds after them clicking the link, the gateway vanishes. 
    function setupgateway()
    {


        var Left = $(window).width() /2;
                Left = Left - $('#gatewaydiv').width()/2;

        var Top = $(window).height() /2;
        Top = Top - $('#gatewaydiv').height()/2;

        $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline');
        $('#gatewayDimmer').width($('html').width());
        $('#gatewayDimmer').height($('html').height());
        $('#gatewayDimmer').css({display:'block', position:'fixed'});
    }

    function removegateway()
    {
        $('#gatewaydiv').css('display', 'none');
        $('#gatewayDimmer').css('display','none');
    }

    $(document).ready(function()
    {
        $('.offerlink').click(function()
        {
            setTimeout('removegateway()', Delay*1000);
        });

        setupgateway();
    });
</script>


<style type="text/css">

    body
    {
        background-image:url('http://');
        background-repeat:repeat;
        height:100%;
        margin:0;
    }

    #mainContent
    {
        background-color:white;
        margin-left:auto;
        margin-right:auto;
        margin-top:130px;
        width:370px;
        border:3px solid #CDCDCD;
        text-align:center;
    }

    #gatewaydiv
    {
        background-image:url("http://");
        background-repeat:no-repeat;
        width:370px;
        height:546px;
        padding:px;
        position:absolute;
        display:none;
        background-color:;
        border:solid px ;
        text-align:center;
        font-family:tahoma;
    }

    #gatewaydiv h1
    {
        font-size:24px;
        color:#FFFFFF;
    }

    #gatewayMessage
    {
        font-size:18px;
    }

    .offerlink
    {
        color:#CC9999;
        font-weight:bold;
                font-size:14px;
    }

    #OfferList
    {
        margin:0;
        padding:0;
    }

    #OfferList
    {
        list-style:none;
    }

    #gatewayDimmer
    {
        background-color:#000000;
        opacity:0.8;
                filter: alpha(opacity = 50);
        display:none;
        position:absolute;
        top:0;


    }

</style>




//**this goes in the body**//

<div id="gatewaydimmer">
</div>

<div id="gatewaydiv">
    <ul id="blah">
        <br>
        <br>
        <br>
        <br>
    <h1></h1>
        <br /><br />
    <li></li>
    </ul>
    <br /><br />

</div>

1 个答案:

答案 0 :(得分:0)

你的意思是,这样的事情?

$('#my-link').click(function(e){
    e.preventDefault();
    // Do something here...
});

加:

<a href="http:// ... " id="my-link">Click Me!</a>

这样,当您点击链接时,而不是重定向到其他地方,//Do something here...中的代码将被执行。

顺便说一句,你必须把它包装成:

$(document).ready(function(){
    //...
});

(或只是$(function(){ ... });

为了在之后执行,创建了<a>的DOM元素。