{"id":88,"date":"2015-12-15T10:16:21","date_gmt":"2015-12-15T02:16:21","guid":{"rendered":"https:\/\/wp.winter-weng.cc\/work\/?p=88"},"modified":"2015-12-15T10:16:21","modified_gmt":"2015-12-15T02:16:21","slug":"js-onclick-attr","status":"publish","type":"post","link":"https:\/\/wp.winter-weng.cc\/work\/?p=88","title":{"rendered":"[JS] onclick attr"},"content":{"rendered":"

Stackoverflow – JavaScript function in href vs. onclick<\/a>
\nbad:<\/strong><\/p>\n

<a<\/span> id<\/span>=<\/span>\"myLink\"<\/span> href<\/span>=<\/span>\"javascript:MyFunction();\"<\/span>><\/span>link text<\/span><\/a><\/span><\/code><\/pre>\n
good:<\/strong><\/p>\n
<a<\/span> id<\/span>=<\/span>\"myLink\"<\/span> href<\/span>=<\/span>\"#\"<\/span> onclick<\/span>=<\/span>\"<\/span>MyFunction<\/span>();<\/span>\"<\/span>><\/span>link text<\/span><\/a><\/span><\/code><\/pre>\n
better:<\/strong><\/p>\n
<a<\/span> id<\/span>=<\/span>\"myLink\"<\/span> href<\/span>=<\/span>\"#\"<\/span> onclick<\/span>=<\/span>\"<\/span>MyFunction<\/span>();<\/span>return<\/span> false<\/span>;<\/span>\"<\/span>><\/span>link text<\/span><\/a><\/span><\/code><\/pre>\n
even better 1:<\/strong><\/p>\n
<a<\/span> id<\/span>=<\/span>\"myLink\"<\/span> title<\/span>=<\/span>\"Click to do something\"<\/span>\n href<\/span>=<\/span>\"#\"<\/span> onclick<\/span>=<\/span>\"<\/span>MyFunction<\/span>();<\/span>return<\/span> false<\/span>;<\/span>\"<\/span>><\/span>link text<\/span><\/a><\/span><\/code><\/pre>\n
even better 2:<\/strong><\/p>\n
<a<\/span> id<\/span>=<\/span>\"myLink\"<\/span> title<\/span>=<\/span>\"Click to do something\"<\/span>\n href<\/span>=<\/span>\"PleaseEnableJavascript.html\"<\/span> onclick<\/span>=<\/span>\"<\/span>MyFunction<\/span>();<\/span>return<\/span> false<\/span>;<\/span>\"<\/span>><\/span>link text<\/span><\/a><\/span><\/code><\/pre>\n
Why better? because return false<\/code> will prevent browser from following the link
\nbest:<\/strong>
\nUse jQuery or other similar framework to attach onclick handler by element’s ID.<\/p>\n
$<\/span>(<\/span>'#myLink'<\/span>).<\/span>click<\/span>(<\/span>function<\/span>(){<\/span> MyFunction<\/span>();<\/span> return<\/span> false<\/span>;<\/span> });<\/span><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Stackoverflow – Jav…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"pgc_sgb_lightbox_settings":"","footnotes":""},"categories":[4],"tags":[21],"class_list":["post-88","post","type-post","status-publish","format-standard","hentry","category-javascript","tag-javascript"],"_links":{"self":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=88"}],"version-history":[{"count":0,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=\/wp\/v2\/posts\/88\/revisions"}],"wp:attachment":[{"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wp.winter-weng.cc\/work\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}