Javascript 自定义longpress长按事件

[wuyuedefeng]

document代理派发长按事件

let timeOutEvent = null
document.addEventListener('touchstart', function (e) {
  timeOutEvent = setTimeout(function () {
    timeOutEvent = 0
    e.target.dispatchEvent(new CustomEvent('longpress'))
  }, 400)
})
document.addEventListener('touchmove', function (e) {
  clearTimeout(timeOutEvent)
  timeOutEvent = null
})
document.addEventListener('touchend', function (e) {
  clearTimeout(timeOutEvent)
  timeOutEvent = null
})

使用：

document.querySelector('.qrcode').addEventListener('longpress', () => {
      console.log('qrcode longpress')
    })

[wuyuedefeng]

整个网页支持长按（pc & wap）

代码 longpress.js

let timeOutEvent = null
const LongpressEvent = CustomEvent || Event

const onTouchStartOrMouseDown = (event) => { timeOutEvent = setTimeout(function () { timeOutEvent = null event.target.dispatchEvent(new LongpressEvent('longpress', { view: window, bubbles: true, cancelable: true })) // longpress触发拦截click事件 const onClick = (event) => { event.stopPropagation() document.removeEventListener('click', onClick, { capture: true }) } document.addEventListener('click', onClick, { capture: true }) }, 400) } document.addEventListener('touchstart', onTouchStartOrMouseDown) document.addEventListener('mousedown', onTouchStartOrMouseDown)

const onTouchMoveOrMouseMove = (event) => { clearTimeout(timeOutEvent) timeOutEvent = null } document.addEventListener('touchmove', onTouchMoveOrMouseMove) document.addEventListener('mousemove', onTouchMoveOrMouseMove)

const onTouchEndOrMouseUp = (event) => { clearTimeout(timeOutEvent) timeOutEvent = null } document.addEventListener('touchend', onTouchEndOrMouseUp) document.addEventListener('mouseup', onTouchEndOrMouseUp)

> 使用
```javascript
import './longpress'