账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    rxjs封装click,mousedown,mouseup事件
    66
    0
    let mouseDown = fromEvent(ele, 'mousedown');
    let mouseUp = fromEvent(ele, 'mouseup');
    let mouseMove = fromEvent(ele, 'mousemove');
    let source2 = mouseDown
    .pipe(
        map(ev => { 
            console.log('map1',ev.timeStamp)
            return mouseUp.pipe(map(ev2 => {
                console.log('map2',ev.timeStamp)
                return [ev, ev2]
            }))
        }),
        concatAll()
    )
    .pipe(
        debounceTime(250)
    )
    source2.subscribe(res => {
        console.log('res',res[1].timeStamp, res[0].timeStamp)
        // if(res[1].timeStamp - res[0].timeStamp > 500) {
    
        // }
    })

    为什么map2的值恒定不变,map1却在变###
    想不明白,求帮助

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 等无此人 普通会员 1楼

      在RxJS中,可以使用on方法来封装点击、mousedown和mouseup事件。以下是一个简单的例子:

      ```javascript import { fromEvent } from 'rxjs';

      export function observe(event: any): any { return fromEvent(event).pipe( tap(event => console.log('Event triggered: ', event)), map(event => event.preventDefault()), catchError(err => of('Error occurred: ', err)) ); }

      // 使用示例 const event$ = observe(document.createEvent('MouseEvents')); event$.subscribe(event => { console.log(' mouse down'); }); event$.subscribe(event => { console.log(' mouse up'); }); event$.subscribe(event => { console.log(' mouse move'); }); ```

      在这个例子中,fromEvent方法用于创建一个事件,然后使用pipe方法来包装这个事件。我们添加了mapcatchError方法来处理不同的情况。

      注意,event.preventDefault()方法会阻止事件的默认行为,例如点击,而不会阻止子事件的默认行为,例如拖拽。如果需要阻止子事件的默认行为,可以在map方法中添加catchError方法。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部