Realization method of Zepto.js in tap event block bubbling _javascript tips

In this paper, the realization method of tap event blocking bubbling in Zepto.js is described. Share to everyone for your reference. Specifically as follows:

Recently in a mobile phone version of the site, originally wanted to use jquery mobile, but the file is too big, so the use of zepto.js

Because there is a delay in using the Click event in a mobile Web page, the tap event in Zepto.js is used.

You can use the Click event to block bubbling by using stoppropagation, but tap does not use this method

Now I need to achieve this effect: Click A.btn This button, then show Div.panel, Hide Div.panel When I click on a 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 ();
});

By debugging the tool, get e This object has a target property, so you can use this property 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 ();
  }
);

That's a solution.

I hope this article will help you with your JavaScript programming.