質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1950閲覧

特定のエリア以外、画像をドロップして全画面表示させない方法

pegy

総合スコア243

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1グッド

1クリップ

投稿2017/10/24 15:42

編集2017/10/24 15:53

通常、ブラウザにJpegファイルをドロップした場合、全画面表示されると思います。実際には全画面表示やモーダルではなくページが遷移しているのかと思います。

現状、input type="file"をドラッグアンドドロップで拾えるようにするエリア(#exclude)を設けているのですが、ユーザが誤って他の箇所にドロップした際に、ページの遷移を避けるコードを考えております。

1)以下のコードくらいしか、思いつかなかったのですが、動作しません。ページ遷移がchangeイベントではないからなのでしょうか?
2)そもそも広域な要素に対してpreventDefault()をすると本来起きてほしい、イベントをも起きなくしてしまう懸念があるとも考えているのですが、もしそうであれば、他に誤ドロップを防止するために取りうる良い方法はございますでしょうか?

よろしくお願い申し上げます。

JavaScript

1$('body:not(#exclude)').on('change',function(){ 2 preventDefault(); 3 4//修正コード 5 6$('body:not(#exclude)').on('drop',function(e){ 7 e.preventDefault(); 8 9})
defghi1977👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/10/26 05:00

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。
guest

回答2

0

ベストアンサー

1)ページ遷移に関わるイベントはchangeイベントではなく, windowオブジェクトが発するbeforeunloadイベントです.

本イベントに関数を紐付けることで実際にページ遷移する前にユーザーに確認をとることができます. 例えばドロップ処理においては誤ったノードに対してドロップ操作をした際の誤ページ遷移を防ぐことが可能となります.

JavaScript

1window.addEventListener("beforeunload", function (e) { 2 var confirmationMessage = "\o/"; 3 4 e.returnValue = confirmationMessage; // Gecko and Trident 5 return confirmationMessage; // Gecko and WebKit 6});

引用元 https://developer.mozilla.org/ja/docs/Web/Reference/Events/beforeunload

2)いいえ, そのようなことはありません.

preventDefaultメソッドはブラウザ規定の動作をキャンセルするだけでイベントの発生を妨げるものではありません.

一般にJavaScriptではイベントをDOMツリー内でイベントを発生させた要素から親要素の方に向かって順に通知していき, 最終的に全てのルートであるwindowオブジェクトに通知します(これをイベントのバブリングと呼びます). dropイベントについても同様です.

ここでdropイベントがwindowオブジェクトに通知されるとブラウザ規定の動作として「ページ遷移」が発生するので,

JavaScript

1window.ondrop = function(e){ 2 e.preventDefault(); 3};

として動作をキャンセルするわけです.
こうした上でドロップ操作を要する要素に対しdropイベントにリスナ関数を登録すればよいのです.

投稿2017/10/24 17:11

defghi1977

総合スコア4756

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2017/10/26 04:25 編集

コメント有難うございます。 仰って頂いた内容をヒントにwindowオブジェクトからページ遷移をキャンセルするような方法をずっと模索し、おりました。うまくいかないことばかりだったのですが、一つ分かったことはHTML5においては、dropだけではなく、dragoverイベントに対しても、イベントのキャンセルを設定しなけばならないということでした。 window.addEventListener("dragover",function(event){ event.preventDefault(); },true); window.addEventListener("drop",function(event){ event.preventDefault(); },true); 一方で、理由は分からなかったのですが、下記のようにwindowオブジェクトのプロパティに直接関数を日も付けることや、windowオブジェクトのbeforeunloadイベントのリスナ関数として遷移を禁止することはできませんでした。。。恐らく能力不足です。 window.ondrop = function(e){ e.preventDefault(); //動作しない }; window.ondragover = function(e){ e.preventDefault(); //動作しない }; window.addEventListener('beforeunload',function(e){ e.preventDefault(); //動作しない },true) 【修正】 失礼致しました。以下のものは動作が確認できました。 window.ondrop = function(e){ e.preventDefault(); //動作する }; window.ondragover = function(e){ e.preventDefault(); //動作する }; beforeunloadイベントの処理のケースだけ動作しませんでした
defghi1977

2017/10/26 05:43

beforeunloadイベントの発生条件に「ユーザーの操作」があるようです. webページが表示された後, ページをクリックしたりキーを入力したあとでページ遷移の操作を試してみて下さい. なお, beforeunloadイベントは特殊なイベントですので, mozillaが公開しているコードをそのまま使った方が良いかもしれません. (ブラウザ実装の差異が大きい)
pegy

2017/10/26 08:27

コメントありがとうございます。 mozillaのbeforeunloadイベントのレファレンスサイトが不完全だったので、英語版で確認しました。キー操作も試しましたが、難しいですね。。悔しいので、この機会にちょっとじっくりbeforeunloadイベントの学んでみます。 最後までお付き合いを頂き、本当に有難うございました。 改めて感謝を申し上げます。
guest

0

dropイベントでは?

【ドラッグ&ドロップ - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/HTML_Drag_and_Drop_API#events

【ネイティブ HTML5 ドラッグ&ドロップ - HTML5 Rocks】
https://www.html5rocks.com/ja/tutorials/dnd/basics/

投稿2017/10/24 15:49

kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pegy

2017/10/24 15:55

コメントありがとうございます。確かにdropが適切でした。 また、イベントオブジェクトのプロパティとしてpreventDefault()するのが適切なため、e.preventDefault()に修正しの他のですが、やはり動作はしてくれません・・
kei344

2017/10/24 16:23

ドロップエリアが複数あるのでなければbodyで拾ってしまえば良いのでは?
kei344

2017/10/24 17:42

少し補足します。$('body:not(#exclude)').on()としても「#exclude範囲のドロップは無視」ということは出来ません。$('body').on()でドロップ全部をキャンセルし、$('#exclude').on()でドロップを先に取得するというコードを書くことになります。
pegy

2017/10/26 03:30

コメント有難うございます。 もろもろ申し上げる前に、defghi1977のコメントも踏まえて自分でもwindowオブジェクトやdropイベントを調べていました。結果的にですがpure JSでは分からずに以下で実装することができました。 bodyであっても、dropだけでは、ページ遷移動作をキャンセルすることができませんでした。。 一部の範囲では認めるとした場合には、仰るとおりコードの順番で解決できるものと考えます。 $(document).on('drop dragover', function (e) { e.stopPropagation(); e.preventDefault(); });
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問