href="#" 中的 event.preventDefault() 不会阻止在 IE 和 Firefox 中跳转到页面顶部

Question

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());
    ....

链接跳转到页面顶部。我尝试使用event.preventDefault() 停止跳转到页面顶部。但是，它仅适用于 Chrome，不适用于 IE 和 Firefox。我该如何解决？

Answer 1

你可以使用javascript:;而不是“#”，这样就不会跳转，请确保返回false以禁用链接行为

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

Answer 2

您不能仅使用window.event 来控制事件。尝试像这样标准化它：

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

您的 HTML 必须是：

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

另一种非 jQuery 解决方案是将您的 HTML 修改为：

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

在这种情况下，您不必在 sendDetails 函数中使用任何处理 event 的东西。 return false; 将自动阻止默认行为。但请注意 - 如果您的 sendDetails 函数中出现任何异常，return false; 将不会执行并允许默认行为。这就是我喜欢使用preventDefault 的原因 - 您可以在函数中立即调用它以立即停止行为，然后执行您需要的操作。

同时，如果你使用 jQuery，尝试像这样绑定点击事件：

$(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)
    });
});

在这种情况下，您的 HTML 将是：

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

虽然使用我提供的.button 选择器而不是使用我提供的.button 选择器来定位适用于此的特定元素会容易得多。我确信“按钮”类不仅仅适用于这些目标<a>，但也许我错了:)

在这种情况下使用 jQuery 很好，因为它已经标准化了 event 对象，您可以使用我在 click 回调中包含的 e 变量。我确信它不仅仅是window.event || e，所以我更喜欢/建议使用 jQuery 来处理事件。

Answer 3

您已经在使用 jQuery，只需使用 jQuery 方式即可。 jQuery 包装了事件对象并提供了一个规范化的事件对象，因此您可以使用标准的preventDefault，您不需要根据浏览器支持的情况进行分叉。

<button class="senddetail" data-type="edu">Education</button>
<button class="senddetail" data-type="com">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 become 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>