[{"data":1,"prerenderedAt":344},["ShallowReactive",2],{"article-click-event-on-lable":3},{"id":4,"title":5,"body":6,"category":330,"createdAt":332,"description":333,"extension":334,"index":335,"meta":336,"navigation":178,"path":337,"publish":178,"seo":338,"series":335,"seriesTitle":335,"stem":339,"tag":340,"thumbnail":335,"updatedAt":335,"__hash__":343},"articles\u002Farticles\u002Fclick-event-on-lable.md","label要素と関連付けされたinput要素にクリックイベントを付与すると2回実行される。",{"type":7,"value":8,"toc":324},"minimark",[9,13,260,268,275,280,283,291,295,304,308,314,317,320],[10,11,12],"p",{},"こんにちはjunです。フォームとしての要素、ボタンとしての要素を掛け合わせて以下のようなものを作成していました。",[14,15,20],"pre",{"className":16,"code":17,"language":18,"meta":19,"style":19},"language-html shiki shiki-themes material-theme-ocean","\u003Clabel class=\"c-button\" for=\"form-input\">\n    \u003Cinput data-product_id=\"1\" id=\"form-input\" type=\"checkbox\" name=\"form-input\" value=\"\">\n    \u003Cspan class=\"text\">まとめて購入\u003C\u002Fspan>\n\u003C\u002Flabel>\n\n\u003Cscript>\n    $('.c-button').on('click',function(){\n        \u002F\u002F ...\n    })\n\u003C\u002Fscript>\n","html","",[21,22,23,67,132,164,173,180,190,235,242,251],"code",{"__ignoreMap":19},[24,25,28,32,36,40,43,46,50,52,55,57,59,62,64],"span",{"class":26,"line":27},"line",1,[24,29,31],{"class":30},"sAklC","\u003C",[24,33,35],{"class":34},"s-wAU","label",[24,37,39],{"class":38},"sJ14y"," class",[24,41,42],{"class":30},"=",[24,44,45],{"class":30},"\"",[24,47,49],{"class":48},"sfyAc","c-button",[24,51,45],{"class":30},[24,53,54],{"class":38}," for",[24,56,42],{"class":30},[24,58,45],{"class":30},[24,60,61],{"class":48},"form-input",[24,63,45],{"class":30},[24,65,66],{"class":30},">\n",[24,68,70,73,76,79,81,83,86,88,91,93,95,97,99,102,104,106,109,111,114,116,118,120,122,125,127,130],{"class":26,"line":69},2,[24,71,72],{"class":30},"    \u003C",[24,74,75],{"class":34},"input",[24,77,78],{"class":38}," data-product_id",[24,80,42],{"class":30},[24,82,45],{"class":30},[24,84,85],{"class":48},"1",[24,87,45],{"class":30},[24,89,90],{"class":38}," id",[24,92,42],{"class":30},[24,94,45],{"class":30},[24,96,61],{"class":48},[24,98,45],{"class":30},[24,100,101],{"class":38}," type",[24,103,42],{"class":30},[24,105,45],{"class":30},[24,107,108],{"class":48},"checkbox",[24,110,45],{"class":30},[24,112,113],{"class":38}," name",[24,115,42],{"class":30},[24,117,45],{"class":30},[24,119,61],{"class":48},[24,121,45],{"class":30},[24,123,124],{"class":38}," value",[24,126,42],{"class":30},[24,128,129],{"class":30},"\"\"",[24,131,66],{"class":30},[24,133,135,137,139,141,143,145,148,150,153,157,160,162],{"class":26,"line":134},3,[24,136,72],{"class":30},[24,138,24],{"class":34},[24,140,39],{"class":38},[24,142,42],{"class":30},[24,144,45],{"class":30},[24,146,147],{"class":48},"text",[24,149,45],{"class":30},[24,151,152],{"class":30},">",[24,154,156],{"class":155},"s0W1g","まとめて購入",[24,158,159],{"class":30},"\u003C\u002F",[24,161,24],{"class":34},[24,163,66],{"class":30},[24,165,167,169,171],{"class":26,"line":166},4,[24,168,159],{"class":30},[24,170,35],{"class":34},[24,172,66],{"class":30},[24,174,176],{"class":26,"line":175},5,[24,177,179],{"emptyLinePlaceholder":178},true,"\n",[24,181,183,185,188],{"class":26,"line":182},6,[24,184,31],{"class":30},[24,186,187],{"class":34},"script",[24,189,66],{"class":30},[24,191,193,197,200,203,206,208,211,214,217,219,221,224,226,229,232],{"class":26,"line":192},7,[24,194,196],{"class":195},"sdLwU","    $",[24,198,199],{"class":155},"(",[24,201,202],{"class":30},"'",[24,204,205],{"class":48},".c-button",[24,207,202],{"class":30},[24,209,210],{"class":155},")",[24,212,213],{"class":30},".",[24,215,216],{"class":195},"on",[24,218,199],{"class":155},[24,220,202],{"class":30},[24,222,223],{"class":48},"click",[24,225,202],{"class":30},[24,227,228],{"class":30},",",[24,230,231],{"class":38},"function",[24,233,234],{"class":30},"(){\n",[24,236,238],{"class":26,"line":237},8,[24,239,241],{"class":240},"sC9rS","        \u002F\u002F ...\n",[24,243,245,248],{"class":26,"line":244},9,[24,246,247],{"class":30},"    }",[24,249,250],{"class":155},")\n",[24,252,254,256,258],{"class":26,"line":253},10,[24,255,159],{"class":30},[24,257,187],{"class":34},[24,259,66],{"class":30},[10,261,262,264,265,267],{},[21,263,35],{},"をクリックするとチェックボックスにチェックが入り、さらにクリックイベントも走るという仕組みです。",[21,266,75],{},"だけをクリックしても同じ動作になります。",[10,269,270,271,274],{},"しかしチェックをしてみると挙動が何故か変。私の場合はON・OFF的な処理をしていたので、inputをクリックすると正常に動き、labelだと処理が行われていないという現象に見舞われました。原因はタイトル通り、上記のような構成をjqueryで実装すると、labelをクリックすると",[21,272,273],{},"$('.c-button')","へのクリックイベントが2回走ることが原因です。対処としては3つほどあります。",[276,277,279],"h2",{"id":278},"_1changeイベントに変更する","1：changeイベントに変更する",[10,281,282],{},"input要素を活かしたい場合はこれがベストだと思います。changeイベントはinputなどの入力値が変更された時に発火するイベントです。for属性を用いてinputと関連付けされいるので、labelをクリックすることでinputの値（チェックされたか）を変更させることができます。一方でinputだけをクリックしても発火します。",[10,284,285,286,290],{},"なぜクリックイベントが2回起きるのかがわかりませんが、for属性あたりとかがなんか関係しているのかもしれません。 ",[287,288,289],"strong",{},"change属性であれば値が変更されたか否かでの発火条件となる","ので問題なくなります。",[276,292,294],{"id":293},"_2inputだけにする","2:inputだけにする",[10,296,297,299,300,303],{},[21,298,273],{},"を",[21,301,302],{},"$('.c-button input')","にします。そうすれば一応inputだけクリックした時に発火します。ただし、labelでボタンのスタイルを表現していたりする場合はこの手は微妙です。",[276,305,307],{"id":306},"_3inputでなくアイコン画像にする","3:inputでなくアイコン・画像にする",[10,309,310,311,313],{},"もし",[21,312,75],{},"がフォーム送信的な意味をもたず実装しているならば（見た目だけ）、画像・アイコンで実装するというてもあります。その時はクラスを付与してアイコンを変えると言ったことが必要です。",[276,315,316],{"id":316},"まとめ",[10,318,319],{},"上記の解決法では１が一番ベストです。vanillajsで上記のような構成を作るとなぜか発生しないので、jqueryの仕様なのかもしれません。",[321,322,323],"style",{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":19,"searchDepth":134,"depth":134,"links":325},[326,327,328,329],{"id":278,"depth":69,"text":279},{"id":293,"depth":69,"text":294},{"id":306,"depth":69,"text":307},{"id":316,"depth":69,"text":316},[331],"ministack","2021-04-30","要注意なクリックイベント。input要素にクリックイベントをつけている場合は注意。","md",null,{},"\u002Farticles\u002Fclick-event-on-lable",{"title":5,"description":333},"articles\u002Fclick-event-on-lable",[341,18,342],"js","jquery","EaIYy3tweEkOCbIAFQ9TqAjE0pXI6pYISdYQKN-YfEw",1780987143455]