【jQuery】ラベルで囲まれたチェックボックスで、ラベルのclickイベントが2回実行される
以下の様なソースで、チェックボックスもしくはラベルをクリックしたときにclickイベントが発生することを期待してHTMLに書いたのですが、
ラベル部分をclickしたとき2回clickイベントが実行されてしまいます。
但し、チェックボックスの四角の部分をclickだと1回しかclickイベントが発生しません。
ラベル部分をclickした時に1回目のイベントが発生し、それと共にチェックボックスがclickされたとされ、 その後、親要素に対してラベルのclickが伝搬し2回目のイベントが発生する様です。 2回目の親要素のイベントを発生させない様にするには、親要素への伝播をキャンセルする【stopPropagation】を用います。 上のソースの様に、チェックボックスのclickイベントで【stopPropagation】をコールしてやれば、 親へのイベントは発生しなくなります。
JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
ラベル部分をclickした時に1回目のイベントが発生し、それと共にチェックボックスがclickされたとされ、 その後、親要素に対してラベルのclickが伝搬し2回目のイベントが発生する様です。 2回目の親要素のイベントを発生させない様にするには、親要素への伝播をキャンセルする【stopPropagation】を用います。 上のソースの様に、チェックボックスのclickイベントで【stopPropagation】をコールしてやれば、 親へのイベントは発生しなくなります。
JavaScriptの理解を深めた人がさらにもう一歩先に進むための本
| 
コメント