javascript - 関数内の jQuery preventDefault

Question

私はpreventDefaultこのような要素イベントで使用しました:

$('#element').click(function (e) {
    do stuff...
});

今、私はすでに使用したい引数をとる関数を持っていますが、どのようにすればよいpreventDefaultかわかりません:

<a href="#services" id="services_link" class="services" onclick="sectionScroll('services')">Services</a>


function sectionScroll(id) {
    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}

代わりに return false を使用してみましたが、リンクがクリックされたときにちらつきが発生しました。

preventDefault上記の関数にどのように追加できますか?

編集

私の最初の質問は、他の引数を持つ関数で preventDefault を使用することに関するものでした。最終的にはインライン JavaScript を使用する必要がなかった (回避する方法がないように見えた) ので、これを使用しました。とてもきれいだと思います：

<a href="#services" class="menu-link">Services</a>


   $('.menu-link').click(function (e) {
        e.preventDefault();
        var location = $(this).attr('href');
        history.pushState(null, null, location)
        $('html, body').animate({
            scrollTop: $(location).offset().top
        }, 1000);
    });

score 13 · Accepted Answer

インラインイベントハンドラーを本当に使用したい場合は (お勧めしませんが)、次のようにしてください。

<a href="#services" id="services_link" class="services"
   onclick="sectionScroll('services', event)">Services</a>

<script type="text/javascript">
function sectionScroll(id, e) {
    e.preventDefault();
    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}
</script>

score 2 · Accepted Answer

他の例と同様に、jQuery を使用してクリックイベントを処理できます。

<a href="#services" id="services_link" class="services">Services</a>

$('#services_link').click(function (e) {
    var id = "services";

    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);

    e.preventDefault();
}

preventDefaultこれにより、イベントを呼び出すことができます。

これは、インライン Javascript を使用しなくなり、イベントロジックをすべて 1 つのメソッド (つまり jQuery) を使用して処理できるため、一部が jQuery で一部がインラインであるというよりもはるかに優れています。

「インラインスクリプトを避けるべき理由」を読んで、インラインスクリプトを避けるべき理由を理解することをお勧めします。

score 0 · Accepted Answer

イベントハンドラから false を返すだけです。

<a href="#services" id="services_link" class="services" onclick="return sectionScroll('services')">Services</a>


function sectionScroll(id) {
    history.pushState(null, null, '#' + id);
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
    return false; // note the addition of return keyword in onclick attribute above
}

score 0 · Accepted Answer

HTMLの代わりにjs自体でイベント Handler を割り当てることができます

<a href="#services" id="services_link" class="services"
                                       data-id="services">Services</a>

/

 $('#services_link').on('click', function(e){
        e.preventDefault();
        // data-id is a HTML5 data attribute

        var id = $(this).data('id');
        history.pushState(null, null, '#' + id);
        $('html, body').animate({
            scrollTop: $("#" + id).offset().top
        }, 1000);
    });

score -1 · Accepted Answer

.on("click") が body または html に "overflow:hidden" を追加すると、コールバック内で e.preventDefalt() を使用したとしても、ページが一番上までスクロールします。

javascript - 関数内の jQuery preventDefault

5 に答える 5

Related

Reference