zepto.js_javascript 기술에서 버블링을 방지하기 위해 탭 이벤트를 구현하는 방법

이 문서의 예에서는 zepto.js에서 버블링을 방지하기 위해 탭 이벤트를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

현재 웹사이트의 모바일 버전을 작업 중입니다. 원래는 jQuery Mobile을 사용하고 싶었지만 파일이 너무 커서 zepto.js를 사용했습니다.

모바일 웹페이지에서 클릭 이벤트 사용 시 딜레이가 발생하므로 zepto.js의 탭 이벤트를 사용합니다.

click 이벤트를 사용하면 stopPropagation을 사용하여 버블링을 방지할 수 있지만 이 방법은 탭에는 유효하지 않습니다.

이제 그런 효과를 얻어야 합니다. a.btn 버튼을 클릭한 다음 div.panel을 표시하고 div.panel이 아닌 항목을 클릭하면 div.panel을 숨깁니다

$("a.btn").on("tap",function(e){
  e.stopPropagation();//该方法不起作用
  $("div.panel").show();
});
$(document).on("tap",function(e){
  $("div.panel").hide();
});

디버깅 도구를 통해 e 객체에 target 속성이 있다는 것을 알 수 있으므로 이 속성을 사용하여 원하는 효과를 얻을 수 있습니다.

$("a.btn").on("tap",function(){
  $("div.panel").show();
});
$(document).on("tap",function(e){
  if(!$(e.target).hasClass("btn")){
    $("div.panel").hide();
  }
});

이것이 해결책입니다

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.