javascript - event.preventDefault() in a href="#" doesn't prevent jumping to top of page in IE and Fir

admin管理员组

文章数量:1332377

HTML:

<a href="#" class="button" onclick="sendDetails(\'Edu\')">

JS:

function sendDetails(type) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
    names = $("#names" + type).val();
    Input = encodeURIComponent($("#Input" + type).val());
    ....

The link jumps to top of page. I tried to use event.preventDefault() to stop jumping to top of page. However, it works only in Chrome and not in IE and Firefox. How can I solve it?

HTML:

<a href="#" class="button" onclick="sendDetails(\'Edu\')">

JS:

function sendDetails(type) {
    if (event.preventDefault) {
        event.preventDefault();
    } else {
        event.returnValue = false;
    }
    names = $("#names" + type).val();
    Input = encodeURIComponent($("#Input" + type).val());
    ....

The link jumps to top of page. I tried to use event.preventDefault() to stop jumping to top of page. However, it works only in Chrome and not in IE and Firefox. How can I solve it?

• javascript
• jquery
• firefox

Share Improve this question Follow edited Feb 18, 2013 at 18:18 BalusC 1.1m376376 gold badges3.6k3.6k silver badges3.6k3.6k bronze badges asked Feb 18, 2013 at 18:08 user1854007user1854007 9511 gold badge22 silver badges88 bronze badges 13

• 5 How do you get the event within sendDetails(type)? – thecodeparadox Commented Feb 18, 2013 at 18:10
• try to add an return false at the end of the function ... – tobspr Commented Feb 18, 2013 at 18:11
• and from where are you calling sendDetails ? – adeneo Commented Feb 18, 2013 at 18:11
• 1 Where does event e from? How are you calling sendDetails? jQuery provides a unified event interface, you can safely call event.preventDefault. – Felix Kling Commented Feb 18, 2013 at 18:12
• <a href="#" class="button" onclick="sendDetails(\'Edu\')">..this is how I calling in my php page... – user1854007 Commented Feb 18, 2013 at 18:13

 |  Show 8 more ments

3 Answers 3

Sorted by: Reset to default 3

instead of "#" you can use javascript:; so there is no jumping, make sure to return false to disable the link-behavior

<a href="javascript:;" onclick="something();return false;">link</a>

You can't only use the window.event to control an event. Try standardizing it like:

function sendDetails(e, type) {
    var evt = window.event || e;
    if (evt.preventDefault) {
        evt.preventDefault();
    } else {
        evt.returnValue = false;
    }
    // ...
}

And your HTML would have to be:

<a href="#" class="button" onclick="sendDetails(event, 'Edu');">ASDF</a>

One other non-jQuery solution is to just modify your HTML to be:

<a href="#" class="button" onclick="sendDetails(event, 'Edu'); return false;">ASDF</a>

in which case you wouldn't have to use anything dealing with event in your sendDetails function. The return false; will prevent the default behavior automatically. But note - if any exceptions occur in your sendDetails function, the return false; won't execute and will allow the default behavior. That's why I like using preventDefault - you can call it immediately in the function to immediately stop the behavior, then do what you need.

At the same time, if you're using jQuery, try binding the click event like this:

$(document).ready(function () {
    $(".button").on("click", function (e) {
        e.preventDefault();
        // Your sendDetails code (without the "event" stuff)
        // OR call sendDetails (and remove the "event" stuff in the sendDetails function)
    });
});

in which case your HTML would be:

<a href="#" class="button">ASDF</a>

Although it would be a lot easier to target the specific elements that this applies to, instead of using the .button selector I provided. I'm sure the "button" class applies to more than just these targeted <a>, but maybe I'm wrong :)

Using jQuery is nice in this situation because it already standardizes the event object in a way that you can just use that e variable I included in the click callback. I'm sure it does a little more than just window.event || e, so I'd prefer/suggest using jQuery for handling events.

You are already using jQuery, just do it the jQuery way. jQuery wraps the event object and provides a normalized event object so you can just use the standard preventDefault, you don't need to fork depending on what the browser supports.

<button class="senddetail" data-type="edu">Education</button>
<button class="senddetail" data-type="">Commercial</button>
<!-- why not just use a button instead of styling a link to look
     like a button? If it does need to be a link for some reason
     just change this back to an anchor tag, but keep the data
     attributes and change the class to "button senddetail" -->

<script>
    function sendDetails(type) {

    // Assuming names and input are not globals you need to declare
    // them or they will bee implicit globals which can cause
    // all sorts of strange errors if other code uses them too
    var names, input;

    names = $("#names" + type).val();

    // you should only use capitalized variables for
    // Constructor functions, it's a convention in JS
    input = encodeURIComponent($("#Input" + type).val());

    //....
    }

  // just calling $ with a function inside of the invocation
  // is the same as using $(document).ready
  $(function () {
    // instead of using onClick, use jQuery to attach the
    // click event in a less intrusive way
    $('.senddetail').on('click', function (event) {
      // no matter what browser this runs in jQuery will
      // provide us a standard .preventDefault to use
      event.preventDefault();
      // jQuery sets 'this' to the DOM element that the event fired on,
      // wrapping it in another jQuery object will allow us to use the
      // .data method to grab the HMLM5 data attribute
      var type = $(this).data('type');
      sendDetails(type);
    });
  });
</script>

本文标签：