Implementation of the tap event in zepto. js to prevent bubbling

Implementation of the tap event in zepto. js to prevent bubbling

This article mainly introduces the implementation method of the tap event in zepto. js to prevent bubbling. The example analyzes the solution to the click latency caused by bubbling. For more information, see

 

 

The example in this article describes how the tap event in zepto. js blocks bubbles. Share it with you for your reference. The details are as follows:

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

Because the use of the click Event in mobile Web pages has a delay, the tap event in zepto. js is used.

You can use stopPropagation to prevent bubbling by using the click event, but this method is not valid for the tap.

Now I need to achieve this effect: Click the. btn button and display div. panel. When I click non-div. panel, hide div. panel.

?

1 2 3 4 5 6 7

$ ("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 get that the object e has a target attribute, so we can use this attribute to achieve the desired effect:

?

1 2 3 4 5 6 7 8

$ ("A. btn"). on ("tap", function (){ $ ("Div. panel"). show (); }); $ (Document). on ("tap", function (e ){ If (! Attributes (e.tar get). hasClass ("btn ")){ $ ("Div. panel"). hide (); } });

This solves the problem.

I hope this article will help you design javascript programs.