『event.preventDefault()』がどこのデフォルトをキャンセルしているのか分かりません、、（是非本文をご覧いただきたいです。）

html
1<ul class="shortcut clear">
2		  <li class="first">
3				<a href="#" class="btn-action">
4					<img src="images/shortcut1.png">
5					<p>SAVE</p>
6				</a>
7			</li>
8			<li class="second">
9				<a href="#" class="btn-action">
10					<img src="images/shortcut2.png">
11					<p>FORECAST</p>
12				</a>
13			</li>
14			<li class="third">
15				<a href="#" class="btn-action">
16					<img src="images/shortcut3.png">
17					<p>CREATE</p>
18				</a>
19			</li>
20</ul>

javascript
1$(function(){
2	$('.second')
3	.on('mouseenter', '.btn-action', function(event){
4		event.preventDefault();
5		$(this).find('img')
6		.animate({'opacity':0.5}, 300);
7	})
8	.on('mouseleave', '.btn-action', function(event){
9		event.preventDefault();
10		$(this).find('img')
11		.animate({'opacity':1}, 300);
12	});
13});

この中にある、、

javascript
1event.preventDefault();

１、これがどこのデフォルト動作をキャンセルしているか分かりません。。。

２、また、どんなデフォルト動作なのかも分かりません。。。

以上、２点を教えていただきたいです。

よろしくお願い致します。

think49

2015/12/09 14:52 編集

HTMLが開示されていない為、このコードで何がキャンセルされるかはわかりません。実際に event.preventDefault(); のコードを削除して比較検証すると判る気がします。

ShunYoshizawa

2015/12/09 15:15

HTMLの情報を追加させていただきました。

izkn

2015/12/10 04:38

こちらの質問が他のユーザから「質問の範囲が広すぎる」という評価を受けていますわからない点を明確にし、調査したこと・試したことと共に記入していただくと、回答が得られやすくなります。

行動規範の内容に同意します

回答1件

ベストアンサー

event.preventDefault() は「ブラウザが持つデフォルトの動作」をキャンセルします。

a要素で click イベントに仕掛けられた場合、リンク先のページに遷移する動作がキャンセルされます。
form要素で submit イベントに仕掛けられた場合、フォーム送信して送信先のページに遷移する動作がキャンセルされます。

Re: ShunYoshizawa さん

投稿2015/12/09 14:48

think49

総合スコア18162

ShunYoshizawa

2015/12/09 14:52

回答ありがとうございます。今回の私が書いたプログラムではどこの動作が、そしてどういった動作がキャンセルされているのでしょうか？

think49

2015/12/09 14:53

補足依頼でも書きましたが、HTMLが不明なので推測できません。

ShunYoshizawa

2015/12/09 14:55

HTMLを追加させていただきました。確認よろしくお願い致します。

think49

2015/12/09 22:47 編集

そのHTMLならa要素のページ遷移(アドレスバーの変化)しかないですね。 img要素にtitle属性やalt属性があれば、ツールチップ表示を無効化している状況も考えられますが。しかし、a[href=#] は基本的には禁止手です。こういう書き方をするようでしたら、div要素で括って event.preventDefault() を削除した方がマシだと思います。

ShunYoshizawa

2015/12/10 02:04 編集

回答ありがとうございます。 a要素のデフォルト動作がキャンセルされてるか試したのですがされていませんでした。。ちなみに、、「mouseenter」と「mouseleave」にデフォルト動作はありますでしょうか？

think49

2015/12/10 10:34

ステータスバーにリンク先を表示する動作がキャンセルされると思われます。

ShunYoshizawa

2015/12/11 03:27

回答ありがとうございます。検証してみたのですが、表示されていました。他に考えられる動作はありますでしょうか？何度も申し訳ございません。。。

think49

2015/12/11 10:54

あとは掲示されたHTMLになくて実際にはある部分に問題がある可能性として http://jsfiddle.net/ah9tfkc5/ - title属性のツールチップ表示機能がキャンセルされます。 - alt属性のツールチップ表示機能がキャンセルされます(IEのみ)。雲を掴むような話なので気にしても仕方がない気はします。とりあえず、event.preventDefault() を使っている人も見かけますので、event.preventDefault() を外してみて問題が出たら書き加える方向でいいのではないでしょうか。あと、繰り返すようですが、a要素でマークアップする意味がありませんので修正を検討してみては如何でしょうか。

ShunYoshizawa

2015/12/11 13:38

回答ありがとうございます！かしこまりました。ありがとうございます。 a要素でマークアップする必要はなぜないのでしょうか？初歩的な質問で大変申し訳ありません。

think49

2015/12/11 22:50

<a href="#"> はクリックしてもアドレスバーに "#" が付与されるだけで何の意味もないからです。古くはマウスカーソルを変更するためだったり、CSS の hover を適用する為に使われました(旧IEが hover 擬似クラスをa要素しかサポートしていなかった)が、これらは CSS で対応できる範疇ですので今となっては意味がないと思います。 a要素でないと出来ない理由があるのなら別ですが、そうでないならリンクでない要素にa要素を使うのは論理構造上、好ましくありません。

ShunYoshizawa

2015/12/12 13:59

そうだったんですね！ありがとうございます！もしa要素を使わないとなるとどんなもので書けばよろしいでしょうか？

think49

2015/12/13 00:11

a要素は削除して問題ないと思います。 <li class="first"><img src="images/shortcut1.png"><p>SAVE</p></li>

ShunYoshizawa

2015/12/16 03:33

ありがとうございます。この場合に擬似クラスの:hoverを書くとしたら、 imgに書けばよろしいでしょうか？

think49

2015/12/16 03:41

それは目的によるのではないでしょうか。ブロックレベルで hover したいなら li:hover を指定し、インラインレベルで hover したいなら img:hover で指定すれば良いと思います。 li:hover は p 要素を含みますが、img:hover は p 要素を含みません。