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>

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

同时，如果您正在使用jQuery，请尝试绑定click事件，如下所示：

$(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选择器。我确定“按钮”类不仅仅适用于这些目标<a>，但也许我错了：）

在这种情况下使用jQuery很不错，因为它已经标准化了event对象，你可以使用我e回调中包含的click变量。我确信它只比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>

href =“＃”中的event.preventDefault（）不会阻止在IE和Firefox中跳转到页面顶部

3 个答案: