有没有一种方法可以在 react-web应用程序中* 添加 长按 事件? *
我有地址清单。长按任意一个地址时,我要触发事件以删除该地址,然后单击确认框。
我创建了一个带有钩子的codeandbox来处理长按并单击。基本上,在按下鼠标时,触摸启动事件,将使用创建计时器setTimeout。经过规定的时间后,将触发长按。在鼠标悬停,鼠标离开,触摸结束等情况下,计时器将清除。
setTimeout
useLongPress.js
import { useCallback, useRef, useState } from "react"; const useLongPress = ( onLongPress, onClick, { shouldPreventDefault = true, delay = 300 } = {} ) => { const [longPressTriggered, setLongPressTriggered] = useState(false); const timeout = useRef(); const target = useRef(); const start = useCallback( event => { if (shouldPreventDefault && event.target) { event.target.addEventListener("touchend", preventDefault, { passive: false }); target.current = event.target; } timeout.current = setTimeout(() => { onLongPress(event); setLongPressTriggered(true); }, delay); }, [onLongPress, delay, shouldPreventDefault] ); const clear = useCallback( (event, shouldTriggerClick = true) => { timeout.current && clearTimeout(timeout.current); shouldTriggerClick && !longPressTriggered && onClick(); setLongPressTriggered(false); if (shouldPreventDefault && target.current) { target.current.removeEventListener("touchend", preventDefault); } }, [shouldPreventDefault, onClick, longPressTriggered] ); return { onMouseDown: e => start(e), onTouchStart: e => start(e), onMouseUp: e => clear(e), onMouseLeave: e => clear(e, false), onTouchEnd: e => clear(e) }; }; const isTouchEvent = event => { return "touches" in event; }; const preventDefault = event => { if (!isTouchEvent(event)) return; if (event.touches.length < 2 && event.preventDefault) { event.preventDefault(); } }; export default useLongPress;
要使用挂钩, App.js
App.js
import useLongPress from "./useLongPress"; export default function App() { const onLongPress = () => { console.log('longpress is triggered'); }; const onClick = () => { console.log('click is triggered') } const defaultOptions = { shouldPreventDefault: true, delay: 500, }; const longPressEvent = useLongPress(onLongPress, onClick, defaultOptions); return ( <div className="App"> <button {...longPressEvent}>use Loooong Press</button> </div> ); }
类组件的旧答案:
您可以使用MouseDown,MouseUp,TouchStart,TouchEnd事件来控制可用作长按事件的计时器。查看下面的代码
class App extends Component { constructor() { super() this.handleButtonPress = this.handleButtonPress.bind(this) this.handleButtonRelease = this.handleButtonRelease.bind(this) } handleButtonPress () { this.buttonPressTimer = setTimeout(() => alert('long press activated'), 1500); } handleButtonRelease () { clearTimeout(this.buttonPressTimer); } render() { return ( <div onTouchStart={this.handleButtonPress} onTouchEnd={this.handleButtonRelease} onMouseDown={this.handleButtonPress} onMouseUp={this.handleButtonRelease} onMouseLeave={this.handleButtonRelease}> Button </div> ); } }