1

これはとても簡単に解決できると思いましたが、どこにも解決策が見つからないようです。これは非常に迷惑なjavascriptの「機能？」です。divにコンテンツを追加するたびに、ドキュメントは上にスクロールして戻ります。この迷惑な動作を回避するにはどうすればよいですか？

n = 0;
function addContent() {
    div = document.getElementById('content');
    for(var i = 0; i < 100; i++) {
        n++;
        div.innerHTML = div.innerHTML + n + '<br />';
    }
}

</script>
</head>

<body>
<div id="content"></div>
<a href="#" onclick="addContent()">more content</a>

例： http： //jsfiddle.net/hQP2q/

4

5 に答える 5

1

ここでの問題は、

アンカーリンクをクリックすると、その要素に登録されているonclickイベントハンドラーが起動されます。

現在、アンカータグのデフォルトの動作は、独自のhref属性に移動することです。

あなたの場合、両方が発生するので、URLは「＃」に移動します。「＃」はブックマークとして機能しているため、ブラウザは、URLの＃の後の文字列と同じIDを持つhtml要素を探します。

したがって、この問題を修正するための解決策は、onclickハンドラーでイベントオブジェクトを渡し、onclickハンドラーが実行されたら、イベントオブジェクトを使用して、要素のクリック動作のデフォルトのアクションを防ぐことです。

したがって、コードは変更されたときのようになります。

<script>
     n = 0;
    function addContent(e) {
        div = document.getElementById('content');
        for(var i = 0; i < 100; i++) {
            n++;
            div.innerHTML = div.innerHTML + n + '<br />';
        }
        e.preventDefault();
        return false;
    }

    </script>
    </head>

    <body>
    <div id="content"></div>
<a href="#" onclick="addContent(event)">more content</a>

ここでフィドルを参照してください：http：//jsfiddle.net/uKrpH/2/embedded/result/

于 2013-02-15T06:36:05.533 に答える
1

同じ問題がありました。テーブルのアイコンをクリックすると、ブラウザがセルの内容を変更し、ページの上部にスクロールしました。「returnfalse」を追加しようとしました。そして問題はなくなりました。

<a href="#" onclick="addContent(); return false;">more content</a>
于 2016-03-14T09:32:40.390 に答える
0

交換できます

<a href="#" onclick="addContent()">more content</a>

と

<a href="javascript:void(0);" onclick="addContent()">more content</a>

または試してみてください：

<a href="#" onclick="addContent();return false;">more content</a>

別のオプションは、次のようにhrefにIDを追加することです。サンプルを参照してください

<a id="link" href="#link" onclick="addContent()">more content</a>
于 2013-02-15T06:25:29.087 に答える
0

別の解決策は、ページに存在しない#idを与えることです。

例えば

<a href="#dontscroll" onclick="addContent()">more content</a>
于 2013-02-15T06:28:23.210 に答える
0

代わりに私はそれをjQueryの方法で行います：http：//jsfiddle.net/hQP2q/3/

<a href="#">more content</a> // <----i just removed the onclick from here

<script type="text/javascript">
        n = 0;

        function addContent() {
            div = document.getElementById('content');
            for (var i = 0; i < 100; i++) {
                n++;
                div.innerHTML = div.innerHTML + n + '<br />';
            }
        }
        $(function() { //<----------------------i would do it here.
            $('a').click(function(e) {
                addContent();
                e.preventDefault();
            });
        });
    </script>
于 2013-02-15T07:01:05.677 に答える