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 以外のもう 1 つの解決策は、HTML を次のように変更することです。

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

その場合、関数で処理するものを使用する必要はありませeventんsendDetails。は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私が提供したセレクターを使用する代わりに、これが適用される特定の要素をターゲットにする方がはるかに簡単ですが. 「ボタン」クラスはこれらの対象以外にも適用されると確信しています<a>が、間違っているかもしれません:)

jQuery を使用すると、コールバックに含めた変数をeventそのまま使用できるようにオブジェクトが標準化されているため、この状況では jQuery を使用すると便利です。私はそれが単なる.eclickwindow.event || e

于 2013-02-18T18:17:14.970 に答える
0

あなたはすでにjQueryを使用しています。jQueryの方法でそれを行ってください。jQuery はイベント オブジェクトをラップし、正規化されたイベント オブジェクトを提供するため、標準のpreventDefaultを使用するだけで済みます。ブラウザーがサポートするものに応じて fork する必要はありません。

<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 に答える