【jQuery】<a href="#">をクリックした時、上までスクロールするのを抑制したい。

Question

###実現したいこと
印刷ボタンを作り、クリックすると印刷ダイアログボックスを表示するようにしたく下記の通り記述をいたしました。

<div class="print">
	<a href="#">印刷をする</a>
</div>

$('div.print a').on('click',function(event){
	event.preventDefault(); //←これが効かない？
	window.print();
});

上記で「印刷ダイアログボックス」が表示されるのですが、下記事象があります。

Firefox最新ver.
「印刷キャンセル」ボタンを押すと、ダイアログボックスが消えた後にページの上部までスクロールする

InternetExplorer11
ページ上部までスクロールしてから「印刷ダイアログボックス」が表示される。

<a>要素をクリックした際のデフォルトの動作を抑制するにはEventオブジェクトのpreventDefault()を使用したら良いのかと思いましたが、こちらが機能しません。

印刷ボタンを押した際に「印刷ダイアログボックス」が表示され「キャンセル」を押した場合に上部スクロールさせず、元のページ表示位置を保つにはどのようにするのが良いかご教授いただけませんでしょうか。
宜しくお願い申し上げます。

###補足情報
印刷ボタンの記述箇所は複数のページにあるため、できるだけHTMLは変更せずに解決できるとありがたいです。

Answer 1

return false; してみてはどうでしょう。

---

追記：

リンクが問題なら消すとか。スクロールトップとかを入れているとこれでも効かないかも。

$( 'div.print a' ).off().on( 'click', function( event ) {
    event.preventDefault();
    this.href="javascript:void(0)";
    window.print();
    return false
} );
```**動くサンプル：**[https://jsfiddle.net/fz96k7sq/](https://jsfiddle.net/fz96k7sq/)

Comments

[umauman]

早速ご回答ありがとうございます。

下記のように記述を直してみたのですが、動作せず…
$('div.print a').on('click',function(){
window.print();
return false;
});

実は同一のJavaScriptファイル上に他のスクリプトもあり、それを削除してみたところ意図する動作をするようになりました。
どうやら何かと相性が良くないようです。
１つずつ消しながら検証してみます。

干渉する記述を特定できましたら、質問欄にソースを追記いたします。
その際、またご助言いただけるととても助かります。
ひとまず一番上と一番下に記述してみたのですが、直らず…といった感じです。

十分確認せずに質問をしてしまい申し訳ございませんでした。

[umauman]

再度のご回答ありがとうございます。
下記で動作するようになりました。

$('div.print a').off().on('click',function(){
//event.preventDefault();
this.href="javascript:void(0)";
window.print();
//return false;
});

動くサンプル拝見しながら「event.preventDefault();」と「return false;」はコメントアウトしましたが、こちらで認識合っていますでしょうか。

検証したところ、スムーススクロールの記述と干渉していたようでした。自分で記述した部分では無かったため、ソースの追記は控えるようにいたしますが、セレクタや条件分岐の部分で#を使用しており、このあたりが原因かなと思います。

.offメソッドの使い方、勉強してみます。ちょっと調べてみたところ、ご提示いただいたような.off().on()のように繋げている例が見つからなかったのですが、このような記法もあるのですね。
大変勉強になりました。

[kei344]

> こちらで認識合っていますでしょうか。
合っています。もし動かなかったら試してもらおう、くらいに残していました。

> .off().on()のように繋げている例が見つからなかったのですが
jQueryはつなげてかけるので、そう書いています。下記と同じ動作になります。
$('div.print a').off(); // JavaScriptでこの要素に付与したイベントを全部削除
$('div.print a').on(); // 自分のしたい動作だけをイベント登録

解決できたようでよかったです。

[umauman]

何度もご回答いただき、すみません。

>jQueryはつなげてかけるので、そう書いています。下記と同じ動作になります。
>$('div.print a').off(); // JavaScriptでこの要素に付与したイベントを全部削除
>$('div.print a').on(); // 自分のしたい動作だけをイベント登録

上記のご説明で理解できました。思い通りの動きになりとても嬉しいです。
この度は本当にありがとうございました！