프론트 엔드 개발 작업에서 브라우저 호환성 및 기타 문제로 인해 종종 "정지 이벤트 버블"및 "블록 브라우저 기본 동작"을 사용합니다.
1. 브라우저의 기본 동작을 차단하십시오
함수 stopDefault (e) {// 이벤트 객체가 제공되는 경우 (e && e.preventDefault) {// 기본 브라우저 조치 (w3c) e.preventDefault (); } else {// IE Window.event.returnValue = false에서 함수의 기본 동작을 차단하는 방법; } false를 반환합니다. }2. 사건의 버블 링을 중지하십시오
함수 stopBubble (e) {// 이벤트 객체가 제공되는 경우 (e && e.StopPropAgation) 이벤트 객체가 제공되는 경우 {// w3c의 stopPropagation () 메소드 e.StopPropagation ()을 지원합니다. } else {// 그렇지 않으면 이벤트 버블 윈도우를 취소하려면 IE를 사용해야합니다. } false를 반환합니다. }구체적인 응용 프로그램 예 : 오늘 사용하기 위해 작성된 프로젝트가 사용자에게 전달되었으며 많은 질문이 반환되었으며 그 중 하나는 매우 고전적이었습니다.
페이지에 양식이 있습니다. 양식을 제출하는 데 사용되는 버튼은 버튼입니다. jQuery를 사용 하여이 버튼의 클릭에 응답하십시오. 게시물을 통해 제출하십시오. 사용자는 텍스트 상자를 입력합니다. 사용자가 입력 할 것을 입력 한 후에는 Enter 키를 직접 누르십시오.이 키는 버튼을 누르는 것과 같습니다. 처음에는이 문제에주의를 기울이지 않았습니다. Enter를 누르면 다른 페이지로 이동했습니다. 많은 정보를 확인한 후, 제출 기본 동작이 양식을 제출하는 것이기 때문에 브라우저의 기본 동작을 차단하고 싶다는 것을 알았습니다. 그러면 JS가 실행되지 않습니다. 따라서 먼저 기본 동작을 취소하십시오. 그런 다음 JQ를 실행하여 제출하십시오. 구체적인 세부 사항을 설명 할 수 없습니다. 텍스트 상자의 유형 = "제출"이 버튼을 직접 클릭하면 다른 페이지로 이동한다는 것을 알고 있습니다. 유형 = "버튼"인 경우 버튼을 클릭하면 발생하지 않습니다. 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 (이벤트); 제출 형식 (양식, 'ActionDiv'); }} 함수 stopDefault (e) {// 이벤트 객체가 제공되는 경우 (e && e.preventDefault) if (e && e.preventDefault) {// 기본 브라우저 조치 (w3c) e.preventDefault (); } else {// IE Window.event.returnValue = false에서 함수의 기본 동작을 차단하는 방법; } false를 반환합니다. } </스크립트>위의 코드를 통해 ENTER를 누를 때 "제출"버튼을 클릭하는 것과 동일하다는 것을 알 수 있습니다. 위의 코드는 IE 및 FF 브라우저와 호환됩니다.
때로는 브라우저를 차단 해야하는 바로 가기 키 동작과 같이 다음과 같은 바로 가기 키 동작이 발생할 때 다음과 같이 다음과 같은 브라우저를 차단해야합니다. 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> a <span style = "color : rgb (51, 153, 51); ">>> </span> a <span style ="color : rgb (51, 153, 51); ">> </</span> <span style ="color : rgb (51, 153, 51); ">> </span>
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);"> "togglefriendfunclist (event, ','he '); href <span style = "color : rgb (51, 153, 51);"> = </span> <span style = "color : rgb (51, 153, 51);"> = </span> <span style = "color : rgb (51, 102, 204);"> ">"togglefriendfunclist ( '6708062', ',' '); 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, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 202, 204); ">"javaScript : void (0); "</span> <span style ="color : rgb (51, 153, 51); ">>">> ">>">> ">>"</span> < "</span style (51, 153, 51);" RGB (51, 153, 51); ">> </span>
jQuery를 쓰는 방법 :
1) 거짓 반환 : 이벤트 처리기에서는 기본 동작 및 이벤트 버블을 방지합니다.
이벤트 처리에서 거짓을 반환, 기본 이벤트 및 버블 링 이벤트를 차단할 수 있습니다.
2) event.preventDefault () : 이벤트 핸들러에서는 기본 이벤트를 방지합니다 (버블 링 허용).
event.preventDefault ()는 기본 이벤트를 방지 할 수 있지만 버블 이벤트가 발생할 수 있습니다.
3) event.stopPropagation () : 이벤트 핸들러에서 버블 방지 (기본 동작 허용).
event.stopPropagation ()은 버블 링을 방지 할 수 있지만 기본 이벤트가 발생할 수 있습니다.
프로토 타입 작성 방법 :
event.stop (이벤트)
사용 소개 :
이벤트가 발생한 후 브라우저는 일반적으로 먼저 이벤트 발생 요소에서 이벤트 핸들러를 트리거 한 다음 부모 요소의 부모 요소 인 부모 요소 등을 문서의 루트 요소까지 트리거합니다. 이것을 이벤트 버블이라고하며 가장 일반적인 이벤트가 퍼지는 방법입니다. 이벤트가 처리되면 이벤트 확산을 중단하고 계속 거품을 원하지 않을 수 있습니다.
프로그램에 이벤트를 처리 할 기회가 있으면 이벤트에 기본 동작이있는 경우 브라우저도 처리합니다. 예를 들어, 내비게이션 링크를 클릭하고 서버에 양식을 제출하고 단일 줄 텍스트 상자에 Enter를 누르십시오. 이러한 이벤트를 처리하는 자신의 방법을 정의하면 관련 기본 동작을 차단할 수 있습니다.
그러나 때로는 해당 문제를 해결할 수 없습니다. 브라우저의 기본 동작을 차단하는 방법이 호출되었지만 Enter를 누를 때는 기본 동작이 여전히 호출됩니다. 결국 문제는 발견되지 않았으므로 Enter 키를 비활성화해야했습니다. 실제로 Enter 키 대신 탭 키가 사용됩니다. 코드는 다음과 같습니다.
<script language = "javaScript"event = "onkeyDown"for = "document"> // if if if (event.keyCode == 13) {// 탭 키로 변경하여 탭의 효과가 다음 객체 event.keyCode = 9; } </script> <script language = "javaScript"type = "text/javaScript"> // Key Forms를 비활성화하여 oxport.onKeyDown = function (var target, code, tag; if (! event) {event = window.event; // 즉, 브라우저 대상 = 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; }}}}}; </스크립트>특정 사용 예제 :
<! docType html public "-// w3c // dtd html 4.01 Transitional // en"> <%@ page language = "java"import = "java.util.*"pageencoding = "utf-8"<%@ includ@ includ prile = "/common/global.jsp"%<head> <head> <head> <head> http-equiv = "pragma"content = "no-cache"> <meta http-equiv = "cache-control"content = "no-cache"> <meta http-equiv = "xpires"content = "0"> <meta http-equiv = "content-type"contment/html; charset = utf-8 "///<conts. GOTOPAGE (currentPage, form) {GOTO_PAGE (currentPage, Form, "ActionDiv"); } function addAppGrp () {$ ( "#actionDiv"). load ( "$ {contextPath} /pages/manage/business/add.jsp"); $ ( "#chance_search_div"). hide (); } 함수 modifyAppGrp (idname) {var id = encodeUricomponent (idname); var url = contextName + "/appgrPaction.do?method=AddAppGrp&appgrpname="+id; restreveUrl (URL, 'ActionDiv'); $ ( "#chance_search_div"). hide (); } 함수 saveBusiness (thisform) {var name = $ ( "#appgrpname"). val (); if (name.trim () == "") {alert ( "그룹 이름이 비어있을 수 없습니다."); 반품; } submitorm (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 parentid = -1; // 현재 노드 디스플레이 이름 var itemtext = $ ( "#appgrpname"). val (); // 새 노드 트리를 추가합니다 .InsertNewChild (ParentId, itemId, itemText, doOnclick, 'myfolderClosed.gif', 'myfolderopen.gif', 'myfolderClosed.gif'); retrieveUrl ( "$ {contextPath} /appgrPaction.do?method=appgrplist", "ActionDiv"); 반품; } 경고 (ARR [1]); 반품; } alert ( "저장 실패"); 반품; } 함수 deleteBusiness (thisform, idname) {if (확인 ( "삭제 하시겠습니까?")) {var id = encodeUricomponent (idname); retieveUrl ( "$ {contextPath} /appgrPaction.do? 이 응용 프로그램 그룹에서 강제 삭제를 강제로 삭제해야합니까? "; if (msg))) {restreveUrl ("$ {contextPath}/appgrPaction.do?method=forcedelAppgrp&appgrpname = "+id, null, null, afterforcedel);}} if (arr.length == 2) {(arr)} {(0)}}}}. " + idname. 반품 ; }} fortomporcedel () {if (content! = null && content! = "") {var arr = content.split ( ","); if (arr [0] == "true") {monitortree (); retrieveUrl ( "$ {contextPath} /appgrPaction.do?method=appgrplist", "ActionDiv"); 반품; } 경고 (ARR [1]); 반품; } alert ( "저장 실패"); 반품; } function enter_down (form, event) {if (event.keyCode == "13") {stopDefault (이벤트); 제출 형식 (양식, 'ActionDiv'); }} 함수 stopDefault (e) {// 이벤트 객체가 제공되는 경우 (e && e.preventDefault) if (e && e.preventDefault) {// 기본 브라우저 조치 (w3c) e.preventDefault (); } else {// IE Window.event.returnValue = false에서 함수의 기본 동작을 차단하는 방법; } false를 반환합니다. . < /tr> <td> <td style = "text-align : 왼쪽; 왼쪽; 패딩-왼쪽 : 50px;"> <br /> name <input type = "text"name = "appgrpname_s"id = "appgrpname_s"onblur = "javaScript : isspecialchar (this); onkeydown = "enter_down (this.form, event);"/> <input type = "button"value = "query"onclick = "javaScript : howlform (this.form, 'actionDiv');"; /> <입력 유형 = "버튼"value = "add"onclick = "javaScript : addAppGrp ();"/> <br/> </td> </tr> </table> </tml : form> </div> <div id = "ActionDiv"> </div> </td> </table> <script>. }/appgrPaction.do?method=AppGrPlist&random= " + math.random ()); -> </script> </body> </html>기본 브라우저 동작 및 JS의 버블 링 동작을 방지하기위한 위의 코드는 내가 공유하는 모든 컨텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.