Implementation method of tap event preventing bubbles in zepto.js

This article describes the implementation method of tap events in zepto.js to prevent bubbles. Share it for your reference. The details are as follows:

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

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

Using click event can use stopPropagation to prevent bubbles, but tap using this method is not effective

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

 $("a.btn").on("tap",function(e){ e.stopPropagation();//This method does not work $("div.panel").show();}); $(document).on("tap",function(e){ $("div.panel").hide();});

Through the debugging tool, we can obtain a target property in the e object, so we can achieve the desired effect through this property:

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

This is a solution

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