例 ボタンがクリックされたときに JavaScript を実行します: Copy Textログイン後にコピーブラウザのサポートIEFirefoxChromeSafariOperaすべての主要なブラウザはonclick属性をサポートしています。 定義と使用法onclick 属性は、要素上でマウスをクリックするとトリガーされます。 注: onclick 属性は、次の要素には適用されません: 、、、、、、<meta>、 <param>、<script>、<style> または <title> </p><p style="margin: 0px; padding: 0px; border: 0px; font-size: 18px; color: rgb(63, 63, 63); font-family: 微软雅黑; white-space: normal; background-color: rgb(253, 252, 248);">HTML 4.01とHTML5の違い</p><p>なし。 </p><p style="margin: 0px; padding: 0px; border: 0px; font-size: 18px; color: rgb(63, 63, 63); font-family: 微软雅黑; white-space: normal; background-color: rgb(253, 252, 248);">構文</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><element onclick="script"></pre><div class="contentsignin">ログイン後にコピー</div></div><p style="margin: 25px 0px 0px; padding: 0px; border: 0px; font-size: 16px; color: rgb(0, 0, 0); font-family: PingFangSC-Regular, Verdana, Arial, 微软雅黑, 宋体; white-space: normal; background-color: rgb(253, 252, 248);">属性値</p><table><tbody><tr class="firstRow"><td width="113" valign="top" style="word-break: break-all;">値</td><td width="996" valign="top" style="word-break: break-all;">説明</td></tr><tr><td width="113" valign="top" style="word-break: break-all;">script</td><td width="996" valign="top" style="word-break: break-all;"> onclickが発生したときに実行するスクリプト。 </td></tr></tbody></table><p> 今作っている小さなシステムは、リーダーが言ったかっこいい効果を実現するためにMetro UI CSSを使っているのですが、各タイルのクリックイベント(divタグ)にパラメータを渡す方法で時間がかかりました) ((私は初心者でも)、最終的に data-* 属性を通じて解決策を見つけました。以下は jQuery と js の実装です: </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="js/jquery/jquery.min.js"></script> <script> $(document).ready(function(){ $(".title").click(function(){ var id=$(this).data("id"); var name=$(this).data("name"); alert("Id: "+id+" ; Name: "+name);}); }); function onClick(e){ var id=e.getAttribute("data-id"); var name=e.getAttribute("data-name"); alert("Id: "+id+" ; Name: "+name); } </script> </head> <body> <div class="title" data-id="1" data-name="Microsoft">Click Me</div> <div id="add" data-id="2" data-name="Google" onclick="onClick(this)">Click Me</div> </body> </html></pre><div class="contentsignin">ログイン後にコピー</div></div><p><br></p>
