{"id":2704,"date":"2012-07-25T18:33:32","date_gmt":"2012-07-25T09:33:32","guid":{"rendered":"http:\/\/blog.cgfm.jp\/garyu\/?p=2704"},"modified":"2012-07-26T21:37:50","modified_gmt":"2012-07-26T12:37:50","slug":"webkit%e7%b3%bb%e3%81%ae%e3%83%96%e3%83%a9%e3%82%a6%e3%82%b6%e3%81%a7button%e3%82%bf%e3%82%b0%e5%86%85%e3%81%ae%e3%82%af%e3%83%aa%e3%83%83%e3%82%af%e3%81%97%e3%81%9f%e8%a6%81%e7%b4%a0%e3%81%ab","status":"publish","type":"post","link":"https:\/\/blog.cgfm.jp\/garyu\/archives\/2704","title":{"rendered":"webkit\u7cfb\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u306fbutton\u30bf\u30b0\u5185\u306e\u30af\u30ea\u30c3\u30af\u3057\u305f\u8981\u7d20\u306b\u3088\u3063\u3066event.target\u304c\u5909\u308f\u308b"},"content":{"rendered":"<p>JavaScript\u7d44\u3093\u3067\u3044\u305f\u6642\u306b\u30cf\u30de\u3063\u305f\u306e\u3067\u30e1\u30e2\u3057\u307e\u3059\u3002<\/p>\n<p>\u7d50\u8ad6\u304b\u3089\u8a00\u3046\u3068\u3001\u3053\u3046\u306a\u308a\u307e\u3059\u3002<\/p>\n<p><strong>webkit\u7cfb\u3067button\u30bf\u30b0\u5185\u306bimg\u306a\u3069\u304c\u3042\u3063\u305f\u5834\u5408\u3001<\/strong><br \/>\n<strong>button\u30bf\u30b0\u5185\u306eimg\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u8981\u7d20\u3092 event.target\u3067\u53d6\u5f97\u3059\u308b\u3068\u3001<\/strong><br \/>\n<strong>button\u5185\u306e\u8981\u7d20\u306eimg\u30bf\u30b0\u304c\u53d6\u5f97\u3055\u308c\u3066\u3057\u307e\u3046\u3002<\/strong><\/p>\n<p>\u3053\u3046\u66f8\u304f\u3068\u4f55\u3060\u304b\u308f\u304b\u308a\u3065\u3089\u3044\u3067\u3059\u306d\uff08\u6c57<\/p>\n<p>jQuery\u306e\u66f8\u304d\u65b9\u306b\u3088\u3063\u3066\u306f\u3001button\u30bf\u30b0\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066\u308b\u306e\u306b\u306a\u305c\u304b\u305d\u306e\u4e2d\u306eimg\u30bf\u30b0\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3053\u3068\u306b\u306a\u308b\u3093\u3067\u3059\u3088\u3002<\/p>\n<p><a href=\"https:\/\/blog.cgfm.jp\/garyu\/appendix\/sample\/jquery\/dom_button.html\" target=\"_blank\">\u691c\u8a3c\u7528DEMO\u30da\u30fc\u30b8\u3092\u898b\u3066\u304f\u3060\u3055\u3044<br \/>\n(webkit\u7cfb\u306echrome\u3084Safari\u3067\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\uff09<\/a><\/p>\n<p><a href=\"https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-large wp-image-2705\" title=\"dom_button\" src=\"https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button-600x325.png\" alt=\"webkit\u7cfb\u3067\u306ebutton\u30bf\u30b0\u5185\u306e\u6319\u52d5\u306e\u9055\u3044\" width=\"584\" height=\"316\" srcset=\"https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button-600x325.png 600w, https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button-200x108.png 200w, https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button-400x217.png 400w, https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button-500x271.png 500w, https:\/\/blog.cgfm.jp\/garyu\/wp-content\/uploads\/2012\/07\/dom_button.png 779w\" sizes=\"auto, (max-width: 584px) 100vw, 584px\" \/><\/a><\/p>\n<p>\u3069\u3093\u306aJavaScript\u3092\u66f8\u3044\u305f\u304b\u3068\u3044\u3046\u3068\u3053\u3093\u306a\u611f\u3058\u3067\u3059\u3002<\/p>\n<h3>HTML<\/h3>\n<br \/>\n<button type=\"button\" id=\"btn1\">#btn1 <img decoding=\"async\" src=\"..\/..\/resource\/img\/banner-nasutoma.gif\" alt='\u30dc\u30bf\u30f3'> \u30dc\u30bf\u30f31\u3067\u3059<\/button><br \/>\n<button type=\"button\" id=\"btn2\">#btn2 <img decoding=\"async\" src=\"..\/..\/resource\/img\/banner-nasutoma.gif\" alt='\u30dc\u30bf\u30f3'> \u30dc\u30bf\u30f32\u3067\u3059<\/button><br \/>\n\n<h3>JavaScript<\/h3>\n<p>[javascript]<br \/>\n$(document).ready(function(){<br \/>\n  \/\/\u30dc\u30bf\u30f31\u306b click\u3067\u5b9a\u7fa9<br \/>\n  $(&#8216;#btn1&#8217;).click(function(){<br \/>\n    alert( $(this).get(0).tagName );<br \/>\n  });<br \/>\n  \/\/\u30dc\u30bf\u30f31\u306b bind\u3067click\u3067\u5b9a\u7fa9\u3057\u3001event.target\u3067\u8981\u7d20\u3092\u53d6\u5f97<br \/>\n  $(&#8216;#btn2&#8217;).bind(&#8216;click&#8217;, function(event){<br \/>\n    alert( $(event.target).get(0).tagName );<br \/>\n  });<br \/>\n});<br \/>\n[\/javascript]<\/p>\n<p>$(&#8216;#btn1&#8217;).click(function() \u301c \u306e\u66f8\u304d\u65b9\u306f\u3069\u306e\u30d6\u30e9\u30a6\u30b6\u3067\u3082\u540c\u3058\u6319\u52d5\u3067\u3057\u305f\u3002<br \/>\nFirefox\u3084IE\u3067\u306f\u3001button\u30bf\u30b0\u5185\u306bIMG\u8981\u7d20\u304c\u3042\u3063\u3066\u3082\u3001button\u30bf\u30b0\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u3053\u3068\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<p>\u306a\u305c\u304bwebkit\u7cfb\u3067bind\u3068event.target\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3068\u304a\u304b\u3057\u304f\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<h2>\u89e3\u6c7a\u7b56<\/h2>\n<p>\u3069\u3046\u3057\u3066\u3082 bind\u3068event.target\u3067\u66f8\u304d\u305f\u3044\u6642\u306f\u3001\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u66f8\u304f\u3053\u3068\u3067\u89e3\u6c7a\u3057\u307e\u3057\u305f\u3002<\/p>\n<p>[javascript]<br \/>\n$(document).ready(function(){<br \/>\n  $(&#8216;#btn3&#8217;).bind(&#8216;click&#8217;, function(event){<br \/>\n    targetElm = $(event.target);<br \/>\n    if( targetElm.get(0).tagName != &#8216;BUTTON&#8217;){ \/\/\u30af\u30ea\u30c3\u30af\u3057\u305f\u8981\u7d20\u306e\u30bf\u30b0\u540d\u304cbutton\u3067\u306f\u306a\u3044\u5834\u5408<br \/>\n      targetElm = $(targetElm).parent();  \/\/\u4e00\u3064\u4e0a\u306e\u89aa\u306e\u8981\u7d20\u3092\u53d6\u5f97\u3059\u308b<br \/>\n    }<br \/>\n    alert( $(targetElm).get(0).tagName );<br \/>\n  });<br \/>\n});<br \/>\n[\/javascript]<\/p>\n<p>button\u30bf\u30b0\u3092\u6700\u8fd1\u3001\u4e45\u3005\u306b\u4f7f\u3063\u3066\u30cf\u30de\u3063\u305f\u306e\u3067\u30e1\u30e2\u3067\u3057\u305f\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript\u7d44\u3093\u3067\u3044\u305f\u6642\u306b\u30cf\u30de\u3063\u305f\u306e\u3067\u30e1\u30e2\u3057\u307e\u3059\u3002 \u7d50\u8ad6\u304b\u3089\u8a00\u3046\u3068\u3001\u3053\u3046\u306a\u308a\u307e\u3059\u3002 webkit\u7cfb\u3067button\u30bf\u30b0\u5185\u306bimg\u306a\u3069\u304c\u3042\u3063\u305f\u5834\u5408\u3001 button\u30bf\u30b0\u5185\u306eimg\u3092\u30af\u30ea\u30c3\u30af\u3057\u305f\u6642\u306b\u8981\u7d20\u3092 event.t [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[19],"tags":[368,63,78,86],"class_list":["post-2704","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript","tag-jquery","tag-78","tag-86"],"_links":{"self":[{"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/posts\/2704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/comments?post=2704"}],"version-history":[{"count":7,"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/posts\/2704\/revisions"}],"predecessor-version":[{"id":2713,"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/posts\/2704\/revisions\/2713"}],"wp:attachment":[{"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/media?parent=2704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/categories?post=2704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.cgfm.jp\/garyu\/wp-json\/wp\/v2\/tags?post=2704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}