おやじプログラマー日記

以下の様なソースで、チェックボックスもしくはラベルをクリックしたときにclickイベントが発生することを期待してHTMLに書いたのですが、 ラベル部分をclickしたとき2回clickイベントが実行されてしまいます。 但し、チェックボックスの四角の部分をclickだと1回しかclickイベントが発生しません。

ラベル部分をclickした時に1回目のイベントが発生し、それと共にチェックボックスがclickされたとされ、 その後、親要素に対してラベルのclickが伝搬し2回目のイベントが発生する様です。 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <label id="testlabel"> label-text <input type="checkbox" id="testcheck"> </label> <script> $(function () { $('#testlabel').click(function(){ alert('test-label'); }); }); </script> 2回目の親要素のイベントを発生させない様にするには、親要素への伝播をキャンセルする【stopPropagation】を用います。 <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <label id="testlabel"> label-text <input type="checkbox" id="testcheck"> </label> <script> $(function () { $('#testlabel').click(function(){ alert('test-label'); }); $("#testcheck").click(function(e){ e.stopPropagation(); }); }); </script> 上のソースの様に、チェックボックスのclickイベントで【stopPropagation】をコールしてやれば、 親へのイベントは発生しなくなります。

JavaScriptの理解を深めた人がさらにもう一歩先に進むための本