2017-08-10 386 views
1

我在我的React應用程序中有一個div,我需要處理點擊和觸摸。但是,當我點擊移動設備時,它會觸發這兩個事件。React onClick和onTouchStart同時觸發

如果我在手機上滑動或者如果我點擊普通的瀏覽器,它可以正常工作,每種情況下只會觸發一個事件。

我該如何處理這個點擊問題而不是觸發這兩個事件?

<div 
    className={myClasses} 
    onClick={this.myHandle} 
    onTouchStart={this.myHandle} 
    >&nbsp; 
</div> 
+0

爲什麼你需要TouchStart並點擊?點擊將被稱爲移動和桌面。 生命週期通常是:touchstart(mousedown) - > touchend(mouseup) - >單擊。 所以除非你需要爲touchstart做一些明確的事情,否則我會放棄它。 – PiniH

+0

我明白了你的觀點。然而,我以前只有一個,如果用戶滑動,它不會觸發點擊,只觸摸事件。這是一種旋轉木馬,用戶可以點擊或滑動「下一張牌」以滑動。 – Yuri

+0

我對這些控制的所有經驗告訴我,這些不會同時開火?你確定你正在分析情況嗎? event.preventDefault()可以幫助你嗎? – Shammoo

回答

1

使用觸摸和鼠標之間的類似事件解決了此問題。 touchStart/mouseDown或touchEnd/mouseUp。根據每種情況,它會發射一個或另一個。

<div 
    className={myClasses} 
    onMouseUp={this.myHandle} 
    onTouchEnd={this.myHandle} 
    >&nbsp; 
</div>