1

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。我该如何解决？

4

3 回答 3

3

而不是“#”你可以使用javascript:;所以没有跳转，确保返回false来禁用链接行为

<a href="javascript:;" onclick="something();return false;">link</a>
于 2013-02-18T18:23:52.207 回答
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 来处理事件。

于 2013-02-18T18:17:14.970 回答
0

您已经在使用 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>
于 2013-02-18T18:31:19.733 回答