Event binding
The click on the mobile side will have a 300ms delay, the click on the mobile side is a click event, and the click on the PC side is a click.
For example, click twice in a row:
- PC will trigger: click twice, dbclick once
- Mobile: will not trigger click, only dblclick will be triggered
Click event: After the first click, check for 300ms to see if there will be a second click operation. If there is nothing to click, if there is a double click.
render() {
return <div>
<button onTouchStart={}
onTouchMove={}
onTouchEnd={}>
submit
</button>
</div>;
}
Solution 1: One-finger event model
On touch screen devices, the one-finger event model is mainly handled by touch-related events. Here are common touch events:
touchstart: Triggered when your finger touches the screen. Can be used to record the start position of the touch.
touchmove: Triggered when the finger slides on the screen. Can be used to track the movement position of the finger.
touchend: Triggered when the finger leaves the screen. Can be used to process logic after touch ends.
touchcancel: Triggered when the touch event is interrupted by the system, for example, when the device has interrupted calls, notifications, etc.
Simulate click effect and can listen for touchstart and touchend events. By determining the start and end positions of the touch, determine whether it is a click operation. If there is no sliding for a certain period of time and the start and end positions of the touch are almost the same, it can be considered a click.
class Demo extends {
// Press the finger: record the starting coordinates of the finger touchstart = (ev) => {
('startstartstartstartstart')
let finger = [0]; //Record the relevant information about operating the finger = ();
= {
startX: ,
startY: ,
isMove: false
};
};
// Finger movement: record the finger offset value, compare it with the error value, and analyze whether the movement has occurred touchmove = (ev) => {
('movemovemovemove')
let finger = [0],
{ startX, startY } = ;
let changeX = - startX,
changeY = - startY;
if ((changeX) > 10 || (changeY) > 10) {
= true;
}
};
// Finger departure: determine whether it is a click based on isMove touchend = () => {
('endddddd')
= ();
(, '')
// Is the click operation time less than 300ms if ( - < 300) {
= false;
}
let { isMove } = ;
if (isMove) return;
// Instruction triggered the click operation ('Clicked the button');
};
}
Solution 2: fastclick (outdated, still available)
usefastclickThe plug-in solves the problem of 300ms delay in mobile using click events and imports the entry file. Notice:Possible conflict with other libraries or frameworks
import FastClick from "fastclick" ()
handle = ()=>{
....
}
render() {
return <div>
<button onClick={}>
submit
</button>
</div>;
}
Solution 3: CSS touch-action property
touch-actionAttributes allow developers to control the browser's default behavior for touch gestures. Willtouch-actionSet asnoneYou can prevent the browser from processing touch events by default, including double-click scaling, eliminating the 300ms delay.
Loop event binding
In React, is it good or bad to use "loop event binding" to the elements "created" of the loop?According to common sense, it is best to use event delegate processing for such requirements, but in React, weThe synthetic event bound to the element by looping is itself processed based on event delegate., so we don’t need to set up the event delegation separately
class Demo extends {
state = {
arr: [{
id: 1,
title: 'news'
}, {
id: 2,
title: 'physical education'
}, {
id: 3,
title: 'Movie'
}]
};
handle = (item) => {
// item: Click on the data for this item ('What I clicked on:' + );
};
render() {
let { arr } = ;
return <div>
{(item => {
let { id, title } = item;
return <span key={id}
style={{
padding: '5px 15px',
marginRight: 10,
border: '1px solid #DDD',
cursor: 'pointer'
}}
onClick={(this, item)}>
{title}
</span>;
})}
</div>;
}
}
In vue, adding event binding to the current element is to do event binding to it, we canDelegate event to its parent element, determine which one is clicked based on the event source
<template>
<div class="list-container" @click="handleClick">
<div class="item" v-for="(item, index) in items" :key="index">
{{ item }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
items: ['Item 1', 'Item 2', 'Item 3', 'Item 4']
};
},
methods: {
handleClick(event) {
// Get the event source const clickedElement = ;
// Determine which child element is clicked (such as list item) if (clickedElement && ('item')) {
// Get the text content of the clicked list item const clickedItem = ;
(`Clicked: ${clickedItem}`);
}
}
}
}
</script>This is the end of this article about the best practices of React event binding. For more related React event binding content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!