[{"data":1,"prerenderedAt":710},["ShallowReactive",2],{"tag-jquery":3},{"count":4,"content":5},2,[6,346],{"id":7,"title":8,"body":9,"category":332,"createdAt":334,"description":335,"extension":336,"index":337,"meta":338,"navigation":180,"path":339,"publish":180,"seo":340,"series":337,"seriesTitle":337,"stem":341,"tag":342,"thumbnail":337,"updatedAt":337,"__hash__":345},"articles\u002Farticles\u002Fclick-event-on-lable.md","label要素と関連付けされたinput要素にクリックイベントを付与すると2回実行される。",{"type":10,"value":11,"toc":326},"minimark",[12,16,262,270,277,282,285,293,297,306,310,316,319,322],[13,14,15],"p",{},"こんにちはjunです。フォームとしての要素、ボタンとしての要素を掛け合わせて以下のようなものを作成していました。",[17,18,23],"pre",{"className":19,"code":20,"language":21,"meta":22,"style":22},"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","",[24,25,26,70,134,166,175,182,192,237,244,253],"code",{"__ignoreMap":22},[27,28,31,35,39,43,46,49,53,55,58,60,62,65,67],"span",{"class":29,"line":30},"line",1,[27,32,34],{"class":33},"sAklC","\u003C",[27,36,38],{"class":37},"s-wAU","label",[27,40,42],{"class":41},"sJ14y"," class",[27,44,45],{"class":33},"=",[27,47,48],{"class":33},"\"",[27,50,52],{"class":51},"sfyAc","c-button",[27,54,48],{"class":33},[27,56,57],{"class":41}," for",[27,59,45],{"class":33},[27,61,48],{"class":33},[27,63,64],{"class":51},"form-input",[27,66,48],{"class":33},[27,68,69],{"class":33},">\n",[27,71,72,75,78,81,83,85,88,90,93,95,97,99,101,104,106,108,111,113,116,118,120,122,124,127,129,132],{"class":29,"line":4},[27,73,74],{"class":33},"    \u003C",[27,76,77],{"class":37},"input",[27,79,80],{"class":41}," data-product_id",[27,82,45],{"class":33},[27,84,48],{"class":33},[27,86,87],{"class":51},"1",[27,89,48],{"class":33},[27,91,92],{"class":41}," id",[27,94,45],{"class":33},[27,96,48],{"class":33},[27,98,64],{"class":51},[27,100,48],{"class":33},[27,102,103],{"class":41}," type",[27,105,45],{"class":33},[27,107,48],{"class":33},[27,109,110],{"class":51},"checkbox",[27,112,48],{"class":33},[27,114,115],{"class":41}," name",[27,117,45],{"class":33},[27,119,48],{"class":33},[27,121,64],{"class":51},[27,123,48],{"class":33},[27,125,126],{"class":41}," value",[27,128,45],{"class":33},[27,130,131],{"class":33},"\"\"",[27,133,69],{"class":33},[27,135,137,139,141,143,145,147,150,152,155,159,162,164],{"class":29,"line":136},3,[27,138,74],{"class":33},[27,140,27],{"class":37},[27,142,42],{"class":41},[27,144,45],{"class":33},[27,146,48],{"class":33},[27,148,149],{"class":51},"text",[27,151,48],{"class":33},[27,153,154],{"class":33},">",[27,156,158],{"class":157},"s0W1g","まとめて購入",[27,160,161],{"class":33},"\u003C\u002F",[27,163,27],{"class":37},[27,165,69],{"class":33},[27,167,169,171,173],{"class":29,"line":168},4,[27,170,161],{"class":33},[27,172,38],{"class":37},[27,174,69],{"class":33},[27,176,178],{"class":29,"line":177},5,[27,179,181],{"emptyLinePlaceholder":180},true,"\n",[27,183,185,187,190],{"class":29,"line":184},6,[27,186,34],{"class":33},[27,188,189],{"class":37},"script",[27,191,69],{"class":33},[27,193,195,199,202,205,208,210,213,216,219,221,223,226,228,231,234],{"class":29,"line":194},7,[27,196,198],{"class":197},"sdLwU","    $",[27,200,201],{"class":157},"(",[27,203,204],{"class":33},"'",[27,206,207],{"class":51},".c-button",[27,209,204],{"class":33},[27,211,212],{"class":157},")",[27,214,215],{"class":33},".",[27,217,218],{"class":197},"on",[27,220,201],{"class":157},[27,222,204],{"class":33},[27,224,225],{"class":51},"click",[27,227,204],{"class":33},[27,229,230],{"class":33},",",[27,232,233],{"class":41},"function",[27,235,236],{"class":33},"(){\n",[27,238,240],{"class":29,"line":239},8,[27,241,243],{"class":242},"sC9rS","        \u002F\u002F ...\n",[27,245,247,250],{"class":29,"line":246},9,[27,248,249],{"class":33},"    }",[27,251,252],{"class":157},")\n",[27,254,256,258,260],{"class":29,"line":255},10,[27,257,161],{"class":33},[27,259,189],{"class":37},[27,261,69],{"class":33},[13,263,264,266,267,269],{},[24,265,38],{},"をクリックするとチェックボックスにチェックが入り、さらにクリックイベントも走るという仕組みです。",[24,268,77],{},"だけをクリックしても同じ動作になります。",[13,271,272,273,276],{},"しかしチェックをしてみると挙動が何故か変。私の場合はON・OFF的な処理をしていたので、inputをクリックすると正常に動き、labelだと処理が行われていないという現象に見舞われました。原因はタイトル通り、上記のような構成をjqueryで実装すると、labelをクリックすると",[24,274,275],{},"$('.c-button')","へのクリックイベントが2回走ることが原因です。対処としては3つほどあります。",[278,279,281],"h2",{"id":280},"_1changeイベントに変更する","1：changeイベントに変更する",[13,283,284],{},"input要素を活かしたい場合はこれがベストだと思います。changeイベントはinputなどの入力値が変更された時に発火するイベントです。for属性を用いてinputと関連付けされいるので、labelをクリックすることでinputの値（チェックされたか）を変更させることができます。一方でinputだけをクリックしても発火します。",[13,286,287,288,292],{},"なぜクリックイベントが2回起きるのかがわかりませんが、for属性あたりとかがなんか関係しているのかもしれません。 ",[289,290,291],"strong",{},"change属性であれば値が変更されたか否かでの発火条件となる","ので問題なくなります。",[278,294,296],{"id":295},"_2inputだけにする","2:inputだけにする",[13,298,299,301,302,305],{},[24,300,275],{},"を",[24,303,304],{},"$('.c-button input')","にします。そうすれば一応inputだけクリックした時に発火します。ただし、labelでボタンのスタイルを表現していたりする場合はこの手は微妙です。",[278,307,309],{"id":308},"_3inputでなくアイコン画像にする","3:inputでなくアイコン・画像にする",[13,311,312,313,315],{},"もし",[24,314,77],{},"がフォーム送信的な意味をもたず実装しているならば（見た目だけ）、画像・アイコンで実装するというてもあります。その時はクラスを付与してアイコンを変えると言ったことが必要です。",[278,317,318],{"id":318},"まとめ",[13,320,321],{},"上記の解決法では１が一番ベストです。vanillajsで上記のような構成を作るとなぜか発生しないので、jqueryの仕様なのかもしれません。",[323,324,325],"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":22,"searchDepth":136,"depth":136,"links":327},[328,329,330,331],{"id":280,"depth":4,"text":281},{"id":295,"depth":4,"text":296},{"id":308,"depth":4,"text":309},{"id":318,"depth":4,"text":318},[333],"ministack","2021-04-30","要注意なクリックイベント。input要素にクリックイベントをつけている場合は注意。","md",null,{},"\u002Farticles\u002Fclick-event-on-lable",{"title":8,"description":335},"articles\u002Fclick-event-on-lable",[343,21,344],"js","jquery","EaIYy3tweEkOCbIAFQ9TqAjE0pXI6pYISdYQKN-YfEw",{"id":347,"title":348,"body":349,"category":702,"createdAt":703,"description":348,"extension":336,"index":337,"meta":704,"navigation":180,"path":705,"publish":180,"seo":706,"series":337,"seriesTitle":337,"stem":707,"tag":708,"thumbnail":337,"updatedAt":337,"__hash__":709},"articles\u002Farticles\u002Fjquery-anker.md","jqueryを用いてページの特定箇所までアニメーションスクロールさせる方法",{"type":10,"value":350,"toc":696},[351,354,357,360,652,663,666,669,673,676,679,682,687,690,693],[13,352,353],{},"こんにちはjunです。どちらかというとメモ的な内容になります。このサイトの「目次」にも実装されているような、見出し名をクリックするとそのコンテンツが書いてある場所まで飛ぶ動きを実装させます。",[278,355,356],{"id":356},"自動スクロールの原理",[13,358,359],{},"この自動スクロールの原理について解説します。",[17,361,365],{"className":362,"code":363,"language":364,"meta":22,"style":22},"language-javascript shiki shiki-themes material-theme-ocean","$('a[href^=#]').on('click',function() {\n    \u002F\u002F スクロールの速度\n    var speed = 400; \u002F\u002F ミリ秒\n\n    \u002F\u002F アンカーの値取得（aタグのhref属性）\n    var href= $(this).attr(\"href\");\n\n    \u002F\u002F 移動先の要素を取得\n    var target = $(href == \"#\" || href == \"\" ? 'html' : href);\n\n    \u002F\u002F 移動先の高さを取得\n    var position = target.offset().top;\n\n    \u002F\u002F スムーススクロール\n    $('body,html').animate({scrollTop:position}, speed, 'swing');\n});\n","javascript",[24,366,367,405,410,431,435,440,478,482,487,542,546,552,578,583,589,642],{"__ignoreMap":22},[27,368,369,372,374,376,379,381,383,385,387,389,391,393,395,397,399,402],{"class":29,"line":30},[27,370,371],{"class":197},"$",[27,373,201],{"class":157},[27,375,204],{"class":33},[27,377,378],{"class":51},"a[href^=#]",[27,380,204],{"class":33},[27,382,212],{"class":157},[27,384,215],{"class":33},[27,386,218],{"class":197},[27,388,201],{"class":157},[27,390,204],{"class":33},[27,392,225],{"class":51},[27,394,204],{"class":33},[27,396,230],{"class":33},[27,398,233],{"class":41},[27,400,401],{"class":33},"()",[27,403,404],{"class":33}," {\n",[27,406,407],{"class":29,"line":4},[27,408,409],{"class":242},"    \u002F\u002F スクロールの速度\n",[27,411,412,415,418,421,425,428],{"class":29,"line":136},[27,413,414],{"class":41},"    var",[27,416,417],{"class":157}," speed",[27,419,420],{"class":33}," =",[27,422,424],{"class":423},"sx098"," 400",[27,426,427],{"class":33},";",[27,429,430],{"class":242}," \u002F\u002F ミリ秒\n",[27,432,433],{"class":29,"line":168},[27,434,181],{"emptyLinePlaceholder":180},[27,436,437],{"class":29,"line":177},[27,438,439],{"class":242},"    \u002F\u002F アンカーの値取得（aタグのhref属性）\n",[27,441,442,444,447,449,452,454,457,459,461,464,466,468,471,473,475],{"class":29,"line":184},[27,443,414],{"class":41},[27,445,446],{"class":157}," href",[27,448,45],{"class":33},[27,450,451],{"class":197}," $",[27,453,201],{"class":37},[27,455,456],{"class":33},"this",[27,458,212],{"class":37},[27,460,215],{"class":33},[27,462,463],{"class":197},"attr",[27,465,201],{"class":37},[27,467,48],{"class":33},[27,469,470],{"class":51},"href",[27,472,48],{"class":33},[27,474,212],{"class":37},[27,476,477],{"class":33},";\n",[27,479,480],{"class":29,"line":194},[27,481,181],{"emptyLinePlaceholder":180},[27,483,484],{"class":29,"line":239},[27,485,486],{"class":242},"    \u002F\u002F 移動先の要素を取得\n",[27,488,489,491,494,496,498,500,502,505,508,511,513,516,518,520,523,526,529,531,533,536,538,540],{"class":29,"line":246},[27,490,414],{"class":41},[27,492,493],{"class":157}," target",[27,495,420],{"class":33},[27,497,451],{"class":197},[27,499,201],{"class":37},[27,501,470],{"class":157},[27,503,504],{"class":33}," ==",[27,506,507],{"class":33}," \"",[27,509,510],{"class":51},"#",[27,512,48],{"class":33},[27,514,515],{"class":33}," ||",[27,517,446],{"class":157},[27,519,504],{"class":33},[27,521,522],{"class":33}," \"\"",[27,524,525],{"class":33}," ?",[27,527,528],{"class":33}," '",[27,530,21],{"class":51},[27,532,204],{"class":33},[27,534,535],{"class":33}," :",[27,537,446],{"class":157},[27,539,212],{"class":37},[27,541,477],{"class":33},[27,543,544],{"class":29,"line":255},[27,545,181],{"emptyLinePlaceholder":180},[27,547,549],{"class":29,"line":548},11,[27,550,551],{"class":242},"    \u002F\u002F 移動先の高さを取得\n",[27,553,555,557,560,562,564,566,569,571,573,576],{"class":29,"line":554},12,[27,556,414],{"class":41},[27,558,559],{"class":157}," position",[27,561,420],{"class":33},[27,563,493],{"class":157},[27,565,215],{"class":33},[27,567,568],{"class":197},"offset",[27,570,401],{"class":37},[27,572,215],{"class":33},[27,574,575],{"class":157},"top",[27,577,477],{"class":33},[27,579,581],{"class":29,"line":580},13,[27,582,181],{"emptyLinePlaceholder":180},[27,584,586],{"class":29,"line":585},14,[27,587,588],{"class":242},"    \u002F\u002F スムーススクロール\n",[27,590,592,594,596,598,601,603,605,607,610,612,615,618,621,624,627,629,631,633,636,638,640],{"class":29,"line":591},15,[27,593,198],{"class":197},[27,595,201],{"class":37},[27,597,204],{"class":33},[27,599,600],{"class":51},"body,html",[27,602,204],{"class":33},[27,604,212],{"class":37},[27,606,215],{"class":33},[27,608,609],{"class":197},"animate",[27,611,201],{"class":37},[27,613,614],{"class":33},"{",[27,616,617],{"class":37},"scrollTop",[27,619,620],{"class":33},":",[27,622,623],{"class":157},"position",[27,625,626],{"class":33},"},",[27,628,417],{"class":157},[27,630,230],{"class":33},[27,632,528],{"class":33},[27,634,635],{"class":51},"swing",[27,637,204],{"class":33},[27,639,212],{"class":37},[27,641,477],{"class":33},[27,643,645,648,650],{"class":29,"line":644},16,[27,646,647],{"class":33},"}",[27,649,212],{"class":157},[27,651,477],{"class":33},[13,653,654,655,658,659,662],{},"aタグのhref属性の文字列",[24,656,657],{},"[href=”#hoge”]","と移動先の要素にID",[24,660,661],{},"\u003Cdiv id=”hoge”>\u003C\u002Fdiv>","とさせることでこのスクロールができます。",[13,664,665],{},"しかし、原理的に必要なものは",[13,667,668],{},"どの場所に飛ばすかの情報を持ったトリガー（今回のaタグ）\n自身の場所を示すページ内で一意のIDをもつクラスまたはID\nがあれば可能です。しかし後述する理由よりできたらページスイングはaタグで行い、IDで区別する方法が中規模以上のサイトでは便利です。",[278,670,672],{"id":671},"url-そのページ内のdom-idを参照している","URL + # =そのページ内のDOM IDを参照している",[13,674,675],{},"今回のスクロールではトリガーとなるaタグをクリックすると、urlに「#hoge」というのが付きます。実はurlに#がつくと、",[13,677,678],{},"そのurlつまり、そのページ内におけるDOMと#以降の文字列に合致する要素に飛ばしてくれます。実はJSがなくても自動スクロースができます。ただしアニメーションもなく画面が一瞬で切り替わるので、味気っぽなさはあります。",[13,680,681],{},"js(jquery)ではアニメーションを実装したいので書いただけです。",[683,684,686],"h3",{"id":685},"つきで行うメリット","#つきで行うメリット",[13,688,689],{},"#を用いて移動先の要素を取得してアニメーションを実装すると、「url+#」でアクセスしたときにもアニメーションスクロールが効くように改変が可能になります。",[13,691,692],{},"今回はその実装はありませんが、Webにそのわっている機能を下地にスクリプトを書いた方が、独自のスクリプトより拡張性が高くなります。",[323,694,695],{},"html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sJ14y, html code.shiki .sJ14y{--shiki-default:#C792EA}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html pre.shiki code .s-wAU, html code.shiki .s-wAU{--shiki-default:#F07178}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":22,"searchDepth":136,"depth":136,"links":697},[698,699],{"id":356,"depth":4,"text":356},{"id":671,"depth":4,"text":672,"children":700},[701],{"id":685,"depth":136,"text":686},[333],"2020-05-01",{},"\u002Farticles\u002Fjquery-anker",{"title":348,"description":348},"articles\u002Fjquery-anker",[343,344],"m8IR5HZJkkmOljGoU2QAnguTcrNVhjIf3JLMRS3OI-s",1780987133090]