链接与onClick

I have a web application that exclusively uses AJAX so there are no full refreshes and everything is set up as

<a href="javascript:...()">

It works really well on Chrome and Firefox but IE asks to confirm the page reload every time I click on anything. Would it be better to change the links to

href="#" 

and make the functionality into onClick?

Thanks.

With "href='#'" you will probably need to preventDefaults on your JS function so the page doesn't go to top because of the '#' anchor.

I would do:

HTML

<a href="javascript:void(0)" class="someclass" rel='2'>

JS

$('.someclass').on('click', function(){
   var value = $(this).attr('rel');
   // use 'value' as you would normaly do with your function(2)
});

Or this one:

HTML

<a href="#" class="someclass" rel='34'>

JS

$('.someclass').on('click', function(e){
    e.preventDefault();

   var value = $(this).attr('rel');
   // use 'value' as you would normaly do with your function(34)
});

Use <a href="#" onclick="myFunction()"></a>.

Also, make sure that in your javascript function you stop the event from propagating like this:

function myFunction() {
    //Your code here
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
    return false;
}

This will stop the browser from jumping to the top of the page and is IE compatible, since IE does not use event.preventDefault()

Just stop using inline javascript all together. You don't need it.

Output the id associated to the element in a data attribute:

<a href="#" data-id="34" class="list-item">listitem1</a>

Now you can bind to those click events from an external js file:

$(document).ready(function(){
    $(".list-item").click(function(e){
        e.preventDefault(); // stop jump to top
        var theId = $(this).attr("data-id"); // get the id
        someFunction(theId); // execute some terribly written function
    });
});

This does work cross-browser.