Implementing the page turning effect through sliding and the click event problem on the mobile terminal

aforementioned

This article is very short~
The main purpose is to summarize and describe a problem caused by the click and js event mechanism on the mobile terminal.
(: Ahem, actually, I have to write an article when I can finish it in a few sentences. I am worthy of it…

text

I recently did a small activity, which required an effect: sliding to turn pages . It's probably like this:

<!-- HTML code -->
<div class="page-container">
	<div class="page" style="background: #dc3b26">1</div>
	<div class="page" style="background: #f3b03d">2</div>
	<div class="page" style="background: #44a2f8">3</div>
</div>

In CSS, first of all, because we are sliding to turn the pages, we must ensure that "there is always only one screen", which can be controlled in the global style sheet , and then "each page" must occupy the entire parent element - here we actually use the feature that "div is a block element, arranged vertically without external force".

/** CSS style */
html,
body{
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	font-size: 60px;
}
.page-container{
	width: 100%;
	height: 100%;
}
.page-container .page{
	width: 100%;
	height: 100%;
}

Its JS implementation is also very simple: because it is on the mobile terminal, touchstart , touchmove and touchend events are used to implement the gesture sliding function:

• When starting (just pressed), record the finger position at this time - as the initial value;
• When moving (touch sliding), the requirement judgment is implemented according to the real-time finger position and the initial finger position variable. In the scenario represented by this article, this step generally also requires the real-time assignment of the "moving distance";
• At the end (finger leaves) (or directly at the move), finishing work is performed - for example: the image slides completely over, the element moves to the end position, and the event listener is canceled;

// Here is the file that controls the global js // Globally prevent the browser's default behavior document.addEventListener("touchstart",function(e){
	if(e.cancelable){
		e.preventDefault();
	}
},{passive: false})
// {passive: false} tells the previous code that there may be a need to reset the behavior document.addEventListener("touchmove",function(e){
	if(e.cancelable){
		e.preventDefault();
	}
},{passive: false})

// JavaScript code let curPageIndex=0;
let pageContainer = document.querySelector(".page-container");
let pageNumber=pageContainer.children.length; //Number of pages// Document window height (here is the height of one screen)
let cHeight=document.documentElement.clientHeight;
// Set the margin-top of the page container to an appropriate value so that it appears in view function toPage(){
	pageContainer.style.transition="all .5s ease";
	pageContainer.style.marginTop=-curPageIndex*cHeight+"px";
	
	// Remove the transition effect after the change is completed!
	pageContainer.addEventListener("transitionend",function(){
		pageContainer.style.transition="none";
	},{once:true})
}
toPage()

pageContainer.ontouchstart=function(e){
	let y=e.changedTouches[0].clientY; //The vertical coordinate of the finger pressed pageContainer.ontouchmove=function(e){
		let dis=e.changedTouches[0].clientY-y; //Calculate distance // Calculate margin-top of page-container
		let mtop=-curPageIndex*cHeight+dis
		if(mtop>0){
			mtop=0;
		}else if(mtop<-(pageNumber-1)*cHeight){
			mtop=-(pageNumber-1)*cHeight;
		}
		//Change position in real time pageContainer.style.marginTop=mtop+"px";
	}
	pageContainer.ontouchend=function(e){
		let dis = e.changedTouches[0].clientY-y;
		// If the sliding distance is too short, return to the position before sliding if(Math.abs(dis)<=60){
			toPage()
		}else if(dis>0 && curPageIndex>0){
			curPageIndex--;
			toPage()
		}else if(dis<0 && curPageIndex<pageNumber-1){
			curPageIndex++;
			toPage()
		}
		
		// After the finger leaves, cancel the monitoring event pageContainer.ontouchmove=null;
		pageContainer.ontouchend=null;
	}
}

So far, functionality seems perfect. But this time, we add a button to the first page:

<div class="page" style="background: #dc3b26">
	<button onclick="alert('哈哈哈哈')" class="but">click me!</button>
	1
</div>

Then go to the page to see the effect:

invalid!

This is because we added the code to "prevent browser default events" in the global js file above.
——In mobile browsers, the click event and mousestart event are triggered at the same time. Because mobile browsers do not have click events, they are simulated by mouse events! ：It is for this reason that the so-called "300ms delay in mobile browsers" problem arises1 ^{.
——Also, in the browser that comes with WeChat, there is an operation called “touch the top and pull down to rebound”, which is actually not allowed. It is also a browser default event.
So generally we need to ban these things.}

But as shown above, banning everything will always cause some troubles. What should we do?
H5 provides "custom attributes". For the method in this article, we can completely - detect whether the currently triggered element has a certain custom attribute in the global event. If it does, do nothing; otherwise, execute the code that prohibits the default behavior:
for example

<button data-default="true" onclick="alert('哈哈哈哈')" class="but">click me!</button>

Change the content of the above "File that controls global js" to the following:

// Globally prevent browser default behavior document.addEventListener("touchstart",function(e){
	if(e.target.dataset.default){
		return;
	}
	if(e.cancelable){
		e.preventDefault();
	}
},{passive: false})
document.addEventListener("touchmove",function(e){
	if(e.target.dataset.default){
		return;
	}
	if(e.cancelable){
		e.preventDefault();
	}
},{passive: false})

It's OK:

In fact, there is another "solution": As mentioned above, the mobile click is actually simulated by the mouse event, so we can start with the mousestart event; and because the button element is a (child) element in the "first page", we can use the method of preventing the event from bubbling :

<!-- button is a normal button -->
<button class="but">click me!</button>

document.querySelector(".but").addEventListener("touchstart",function(e){
	e.stopPropagation();
	alert('嘎哈哈');
},false) 

About Capture and Bubbling→

The first thing we need to know is that when we press a button with the mouse, it is not "clicking a button", but the mouse (button on it) is pressed in this area, and the operating system and browser map this information to the "button" area and trigger its logic.
In fact, there is no position information for mouse clicks. The operating system is always monitoring the movement of the mouse, and calculates the coordinates based on the accumulated displacement and passes them to the browser.
Then, the process of converting this coordinate into an event on a specific element can be called " capture ". What about " bubbling "? This is hard to explain, but I believe you understand one thing: when you press the TV switch, you also press the TV!
This is what many articles refer to as “the bubbling process is from the inside to the outside, and the capturing process is from the outside to the inside”, or the “onion model”.
Another point is: the third parameter true/false of the addEventListener event means "capture/bubble". (Don't think too much, this is just one of the event models provided by the browser. Regardless of whether you listen or not, when an event occurs, capture and bubbling always occur in sequence)

This is the end of this article about the implementation of sliding page turning effects and click event issues on mobile terminals. For more relevant content on sliding page turning effects, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!