How to implement tap event to prevent bubbling in zepto.js_javascript skills

The example in this article describes how to implement tap events to prevent bubbling in zepto.js. Share it with everyone for your reference. The details are as follows:

I am currently working on a mobile version of my website. I originally wanted to use jQuery Mobile, but the file was too large, so I used zepto.js

Since there is a delay when using click events on mobile web pages, the tap event in zepto.js is used.

Using the click event, you can use stopPropagation to prevent bubbling, but this method is invalid for tap

Now I need to achieve such an effect: click the a.btn button, then display the div.panel, and hide the div.panel when I click on a non-div.panel

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

Through debugging tools, we can get that there is a target attribute in the e object, so we can use this attribute to achieve the desired effect:

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

This is the solution

I hope this article will be helpful to everyone’s JavaScript programming design.