React?事件綁定的最佳實(shí)踐

更新時(shí)間：2025年03月21日 10:10:57 作者：不叫貓先生

本文主要介紹了移動端點(diǎn)擊事件的300ms延遲問題,并詳細(xì)的介紹了三種解決方法,具有一定的參考價(jià)值,感興趣的可以了解一下

事件綁定

移動端的click會存在300ms延遲，移動端的click是點(diǎn)擊事件，PC端的click是點(diǎn)擊。

比如連著點(diǎn)擊兩下：

PC會觸發(fā)：兩次click、一次dbclick
移動端：不回觸發(fā)click、只會觸發(fā)dbclick

點(diǎn)擊事件：第一次點(diǎn)擊后，檢測300ms，看看會不會有第二次點(diǎn)擊操作，如果沒有事單擊，如果有就是雙擊。

render() {
        return <div>
            <button onTouchStart={this.touchstart}
                onTouchMove={this.touchmove}
                onTouchEnd={this.touchend}>
                提交
            </button>
        </div>;
    }

解決方案一：單手指事件模型

在觸摸屏設(shè)備上，單手指事件模型主要通過 touch 相關(guān)的事件來處理。以下是常見的觸摸事件：

touchstart：當(dāng)手指觸摸屏幕時(shí)觸發(fā)?？梢杂脕碛涗浻|摸的開始位置。
touchmove：手指在屏幕上滑動時(shí)觸發(fā)?？梢杂脕碜粉櫴种傅囊苿游恢?。
touchend：手指從屏幕上離開時(shí)觸發(fā)?？梢杂脕硖幚碛|摸結(jié)束后的邏輯。
touchcancel：當(dāng)觸摸事件被系統(tǒng)打斷時(shí)觸發(fā)，例如，設(shè)備出現(xiàn)電話、通知等中斷時(shí)。

模擬點(diǎn)擊效果，可以監(jiān)聽 touchstart 和 touchend 事件。通過判斷觸摸的起始位置和結(jié)束位置，確定是否是點(diǎn)擊操作。如果在一定時(shí)間內(nèi)沒有滑動，并且觸摸的起始和結(jié)束位置幾乎相同，則可以認(rèn)為是一個(gè)點(diǎn)擊。

class Demo extends React.Component {
 
    // 手指按下：記錄手指的起始坐標(biāo)
    touchstart = (ev) => { 
        console.log('startstartstartstartstart')
        let finger = ev.changedTouches[0]; //記錄了操作手指的相關(guān)信息
        this.touchStartTime = Date.now();
        this.touch = {
            startX: finger.pageX,
            startY: finger.pageY,
            isMove: false
        };
    };
    // 手指移動：記錄手指偏移值，和誤差值做對比，分析出是否發(fā)生移動
    touchmove = (ev) => {
        console.log('movemovemovemove')
        let finger = ev.changedTouches[0],
            { startX, startY } = this.touch;
        let changeX = finger.pageX - startX,
            changeY = finger.pageY - startY;
        if (Math.abs(changeX) > 10 || Math.abs(changeY) > 10) {
            this.touch.isMove = true;
        }
    };
    // 手指離開：根據(jù)isMove判斷是否是點(diǎn)擊
    touchend = () => {
        console.log('endddddd')
        this.touchEndTime = Date.now();
        console.log(this.touch.isMove, 'this.touch.isMove')
        // 點(diǎn)擊操作時(shí)間是否小于300ms
        if (this.touchEndTime - this.touchStartTime < 300) {
            this.touch.isMove = false;
        }  
        let { isMove } = this.touch;
        if (isMove) return;
        // 說明觸發(fā)了點(diǎn)擊操作
        console.log('點(diǎn)擊了按鈕');
    };
}

解決方案二：fastclick(已過時(shí)，仍可用)

使用fastclick插件解決移動端使用click事件的300ms延遲問題，在入口文件導(dǎo)入。注意：可能與其他庫或框架沖突

import FastClick from "fastclick"
FastClick.attach(document.body)

handle = ()=>{
  ....
}

render() {
        return <div>
            <button onClick={this.handle}>
                提交
            </button>
        </div>;
    }

解決方案三：CSS touch-action屬性

touch-action 屬性允許開發(fā)者控制瀏覽器對觸摸手勢的默認(rèn)行為。將 touch-action 設(shè)置為none可以阻止瀏覽器對觸摸事件的默認(rèn)處理，包括雙擊縮放，從而消除 300ms 延遲。

循環(huán)事件綁定

在React中，我們給循環(huán)「創(chuàng)建」的元素做“循環(huán)事件綁定”，是好還是不好？按常理來說，此類需求用事件委托處理是最好的，但是在React 中，我們循環(huán)給元素綁定的合成事件本身就是基于事件委托處理的，所以無需我們自己再單獨(dú)的設(shè)置事件委托的處理機(jī)制

class Demo extends React.Component {
    state = {
        arr: [{
            id: 1,
            title: '新聞'
        }, {
            id: 2,
            title: '體育'
        }, {
            id: 3,
            title: '電影'
        }]
    };

    handle = (item) => {
        // item:點(diǎn)擊這一項(xiàng)的數(shù)據(jù)
        console.log('我點(diǎn)擊的是：' + item.title);
    };

    render() {
        let { arr } = this.state;
        return <div>
            {arr.map(item => {
                let { id, title } = item;
                return <span key={id}
                    style={{
                        padding: '5px 15px',
                        marginRight: 10,
                        border: '1px solid #DDD',
                        cursor: 'pointer'
                    }}
                    onClick={this.handle.bind(this, item)}>
                    {title}
                </span>;
            })}
        </div>;
    }
}

在vue中，給當(dāng)前元素添加事件綁定就是給給它做事件綁定，我們可以給它父級元素做事件委托，根據(jù)事件源判斷點(diǎn)擊的是哪一個(gè)

<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) {
      // 獲取事件源
      const clickedElement = event.target;

      // 判斷點(diǎn)擊的是哪個(gè)子元素（例如列表項(xiàng)）
      if (clickedElement && clickedElement.classList.contains('item')) {
        // 獲取點(diǎn)擊的列表項(xiàng)的文本內(nèi)容
        const clickedItem = clickedElement.textContent;
        console.log(`點(diǎn)擊了: ${clickedItem}`);
      }
    }
  }
}
</script>

到此這篇關(guān)于React 事件綁定的最佳實(shí)踐的文章就介紹到這了,更多相關(guān)React 事件綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: