フロントエンドの開発作業では、ブラウザの互換性やその他の問題により、「イベントバブルを停止する」と「ブロックブラウザのデフォルト動作」を使用することがよくあります。
1.ブラウザのデフォルト動作をブロックします
function stopdefault（e）{//イベントオブジェクトが提供されている場合、これは非具合的なブラウザの場合（e && e.preventdefault）{//デフォルトブラウザーアクション（w3c）e.preventdefault（）; } else {// IE window.event.returnValue = falseの関数のデフォルトアクションをブロックする方法; } falseを返します。 }2。イベントの泡を止めてください
関数stopbubble（e）{//イベントオブジェクトが提供されている場合、これは（e && e.StopPropagation）{// W3CのStopPropagation（）Method E.StopPropagation（）; } else {//それ以外の場合、IEを使用してイベントバブルウィンドウをキャンセルする必要があります。event.cancelbubble= true; } falseを返します。 }特定のアプリケーションの例：書かれたプロジェクトは、今日使用するためにユーザーに引き渡され、多くの質問が返されました。その1つは非常に古典的でした。
ページにフォームがあります。フォームの送信に使用されるボタンはボタンです。 jqueryを使用して、このボタンのクリックに応答します。投稿から送信してください。ユーザーはテキストボックスを入力します。ユーザーが入力して記入したら、Enterキーを直接押します。これはボタンを押すのと同等です。当初、私はこの問題に注意を払いませんでした。 Enterを押すと、別のページにジャンプしました。多くの情報を確認した後、提出のデフォルトの動作はフォームを送信することであり、JSが実行されないため、ブラウザのデフォルト動作をブロックしたいと思いました。したがって、最初にデフォルトの動作をキャンセルします。次に、JQを実行して送信します。具体的な詳細は説明できません。テキストボックス内のtype = "submit"がボタンで直接クリックされた場合、別のページにジャンプすることを知っています。 type = "ボタン"の場合、これはボタンをクリックしても発生しません。 Enterを押して別のページにジャンプできます。解決策は次のとおりです。
<入力型= "text" name = "appgrpname_s" id = "appgrpname_s" onkeydown = "enter_down（this.form、event）;"/>
<script type = "text/javascript"> function enter_down（form、event）{if（event.keycode == "13"）{stopdefault（event）; submitform（form、 'ActionDiv'）; }} function stopdefault（e）{//イベントオブジェクトが提供されている場合、これは非具合的なブラウザーif（e && e.preventdefault）{//デフォルトのブラウザーアクション（w3c）e.preventdefault（）をブロックします。 } else {// IE window.event.returnValue = falseの関数のデフォルトアクションをブロックする方法; } falseを返します。 } </script>上記のコードを介して、Enterを押すと、[送信]ボタンをクリックすることと同等であることがわかります。上記のコードは、IEおよびFFブラウザと互換性があります。
ブラウザをブロックする必要があるショートカットキーの動作に遭遇すると、次のようなショートカットキーの動作が発生した場合があります。
OnKeyDownイベントでStopDefault（イベント）関数を呼び出す必要があり、OnKeyUpイベントでの呼び出しが失敗することに注意してください。
<span style = "color：rgb（51、153、51）;"> </</span> a onclick <span style = "color：rgb（51、153、51）;"> = </span> <span style = "color：rgb（51、153、51）;" >> </span </> 51）; ">>> </span> a <span style =" color：rgb（51、153、51）
HREFはnull値であるため、ブラウザのデフォルト動作がブロックされていない場合、その効果はページを更新することです。
これで、HREFのリンクイベントをブロックしてOnClickイベントを実行する必要があるのは、これだけです。
古い取り扱い方法：
<span style = "color：rgb（51、153、51）;"> <</span> a onclick <span style = "color：rgb（51、153、51）;"> = </span> <span style = "color：rgb（51、102、204）; href <span style = "color：rgb（51、153、51）;"> = </span> <span style = "color：rgb（51、153、51）;"> = </span> <span style = "color：rgb（51、102、204）;"> ">"トグルファンクリスト（イベント、 " href<span style="color: rgb(51, 153, 51);">=</span><span style="color: rgb(51, 102, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202、202、202、202、202、202、202、202、202、202、202、202、202、202、202、202、202、202、204）; RGB（51、153、51）; ">> </span>
jqueryの書き方：
1）falseを返す：イベントハンドラーでは、デフォルトの動作とイベントバブルを防ぎます。
イベントの処理、デフォルトのイベント、バブルイベントの処理でfalseを返すことができます。
2）event.PreventDefault（）：イベントハンドラーでは、デフォルトのイベントを防止します（バブラーリングを許可します）。
event.preventdefault（）は、デフォルトのイベントを防ぐことができますが、バブルイベントの発生を許可します。
3）event.StopPropagation（）：イベントハンドラーでは、バブルを防止します（デフォルトの動作を許可します）。
event.stoppropagation（）は、泡立ちを防ぐことができますが、デフォルトのイベントの発生を可能にします。
プロトタイプの書き方：
event.Stop（イベント）
使用法の紹介：
イベントが発生した後、ブラウザは通常、最初にイベントが発生する要素でイベントハンドラーをトリガーし、次にその親要素、親要素の親要素などをトリガーします...など、ドキュメントのルート要素まで。これはイベントバブルと呼ばれ、イベントが最も一般的な方法で広がります。イベントが処理された後、イベントの広がりを止めたいと思うかもしれませんが、それがバブルを続けたくないかもしれません。
プログラムにイベントを処理する機会がある場合、イベントにデフォルトの動作がある場合、ブラウザも処理します。たとえば、ナビゲーションリンクをクリックし、フォームをサーバーに送信し、Enterを1行のテキストボックスに押します。これらのイベントを処理する独自の方法を定義する場合、関連するデフォルトの動作をブロックすることを非常に喜んでいるかもしれません。
ただし、対応する問題を解決できない場合があります。ブラウザのデフォルトの動作をブロックする方法は呼び出されましたが、Enterを押すとデフォルトの動作が呼び出されます。最終的に、問題は見つかりませんでしたので、Enterキーを無効にする必要がありました。実際、Enterキーの代わりにTABキーが使用されます。コードは次のとおりです。
<スクリプト言語= "javascript" event = "onkeydown" for = "document"> // Enterキーの場合は（event.keycode == 13）{//タブキーに変更して、Enterを押すたびにタブの効果、次のオブジェクトEvent.keycode = 9にジャンプします。 } </script> <script言語= "javascript" type = "text/javascript"> // enterキーフォームを無効にしてdocument.onkeydown = function（event）{var target、code、tag; if（！event）{event = window.event; // IEブラウザーターゲット= event.srcelement; code = event.keycode; if（code == 13）{tag = target.tagname; if（tag == "textarea"）{return true; } else {return false; }}} else {target = event.target; // firefox code = event.keycodeなど、W3C標準に従うブラウザの場合; if（code == 13）{tag = target.tagname; if（tag == "input"）{return false; } else {return true; }}}}}; </script>特定の使用例：
<！doctype html public " - // w3c // dtd html 4.01 transitional // en"> <％@ page言語= "java" import = "java.util。*" pageencoding = "utf-8"％> <％@ include file = "/pages/common.jsp" http-equiv = "pragma" content = "no-cache"> <meta http-equiv = "cache-control" content = "no-cache"> <meta http-equiv = "compent" content = "0"> <meta http-equiv = "content-type" content = "text/html; html; charset = utf-8" "" "" gotopage（currentPage、form）{goto_page（currentPage、form、 "ActionDiv"）; } function addAppgrp（）{$（ "＃ActionDiv"）。load（ "$ {contextPath} /pages/manage/business/add.jsp"）; $（ "＃chance_search_div"）。hide（）; } function ModifyAppgrp（idname）{var id = encodeuricomponent（idname）; var url = contextname + "/appgrpaction.do?method=adddappgrp&appgrpname="+id; retiveurl（url、 'ActionDiv'）; $（ "＃chance_search_div"）。hide（）; } function saveBusiness（thisform）{var name = $（ "＃appgrpname"）。val（）; if（name.trim（）== ""）{alert（ "グループ名は空にすることはできません。"）;戻る; } submitform（thisform、null、aftersave）;戻る ; } function aftersave（content）{if（content！= null && content！= ""）{var arr = content.split（ "、"）; if（arr [0] == "true"）{$（ "＃chance_search_div"）。show（）; //現在のノードvar itemid = "0 ::" + $（ "＃appgrpname"）。val（）; // presidノード。この方法はルートアプリケーショングループを追加するときにのみ実行されるため、親ノードは均一に-1 var dar derid = -1です。 //現在のノードディスプレイ名var itemtext = $（ "＃appgrpname"）。val（）; //新しいノードtree.insertnewChild（daredid、itemid、itemtext、dooonclick、 'myfolderclosed.gif'、 'myfolderopen.gif'、 'myfolderclosed.gif'）; retiveurl（ "$ {contextpath}/appgrpaction.do?method=appgrplist"、 "ActionDiv"）;戻る; } alert（arr [1]）;戻る; } alert（ "save failed"）;戻る; } function deleteBusiness（thisform、idname）{if（confism（ "削除しますか？"））{var id = encodeuricomponent（idname）; Retiveurl（ "$ {ContextPath}/Appgrpaction.do?method=deleteappgrp＆appgrpname=" + id、null、null、function（content）{if（content！= null && content！= ""）{var arr = content.split（ "、"、 "）;このアプリケーショングループの下で削除する必要がありますか？ Node ItealId " + idname.do etrive.do？戻る ; }} function avterforcedel（）{if（content！= null && content！= ""）{var arr = content.split（ "、"）; if（arr [0] == "true"）{monitortree（）; retiveurl（ "$ {contextpath}/appgrpaction.do?method=appgrplist"、 "ActionDiv"）;戻る; } alert（arr [1]）;戻る; } alert（ "save failed"）;戻る; } function enter_down（form、event）{if（event.keycode == "13"）{stopdefault（event）; submitform（form、 'ActionDiv'）; }} function stopdefault（e）{//イベントオブジェクトが提供されている場合、これは非具合的なブラウザーif（e && e.preventdefault）{//デフォルトのブラウザーアクション（w3c）e.preventdefault（）をブロックします。 } else {// IE window.event.returnValue = falseの関数のデフォルトアクションをブロックする方法; } falseを返します。 } </script> </head> <body> <table> <tr> <td style = "text-align：" left; "> <div id =" chance_search_div "> <html：form action =" appgrpaction.do?method = appgrplist "> <table> <table> <tr> <th <input =" <tr> <td style = "text-align：left; padding-left：50px;"> <br /> name <input type = "text" name = "appgrpname_s" id = "appgrpname_s" onblur = " onekeydown = "enter_down（this.form、event）;"/> <input type = "button" value = "query" onclick = "javascript：submitform（this.form、 'actiondiv'）;" /> <入力タイプ= "button" value = "add" onclick = "javascript：addappgrp（）;"/> <br/> </td> </tr> </table> </tml：form> </div> <div = "actiondiv"> </div> </td> </tr </table> <contation> <contation> <> <> <> }/appgrpaction.do?method=appgrplist&random= " + math.random（））; - > </script> </body> </html>JSのデフォルトのブラウザの動作と泡立つ動作を防ぐための上記のコードは、私があなたと共有するすべてのコンテンツです。私はそれがあなたに参照を与えることができることを願っています、そしてあなたがwulin.comをもっとサポートできることを願っています。