属性 'clientX' 在 Rxjs v6.x 类型 'Event'.ts(2339) 上不存在
Property 'clientX' does not exist on type 'Event'.ts(2339) on Rxjs v6.x
我正在尝试使用 rxjs 来处理一个问题,当 clientY 大于 200px 时,文档会得到第一次点击。
问题是,打字稿告诉我 clientX 不在事件类型中。您可以在下面看到:
所以我尝试在参数中将事件类型设置为 MouseEvent,例如:
(event: MouseEvent)=> ({})
但它给了我另一个错误,似乎问题出在 rxjs 无法检测到点击事件不同于简单事件;
解决这个奇怪问题的最佳解决方案是什么?
更新:原因及答案:
感谢@Prince
我发现,fromEvent 仅发出 "event type",这意味着它可以告诉我们哦,我收到了一个事件。
所以我们应该告诉它把事件转换成曾经发生过的事件(在这个例子中是 MouseEvent),这样它就可以按照我们想要的方式工作,就像我们对 html 输入类型所做的那样,以防止使用值时出现类型错误:
const search_elm = document.getElementById("search")! as HTMLInputElement;
search_elm.value="10";
您可以使用以下运算符(fromEvent、pluck、filter、first)来实现此目的。请查找内嵌描述。
const source = fromEvent(document, 'click')
.pipe(
map(event => {
const e = event as MouseEvent;
return {x: e.clientX, y:e.clientY};
}),
filter((obj) => obj.y > 200),
first(),
);
source.subscribe(x => console.log(x));
这里是 stackblitz link:https://stackblitz.com/edit/rxjs-ccrz9x
我正在尝试使用 rxjs 来处理一个问题,当 clientY 大于 200px 时,文档会得到第一次点击。
问题是,打字稿告诉我 clientX 不在事件类型中。您可以在下面看到:
所以我尝试在参数中将事件类型设置为 MouseEvent,例如:
(event: MouseEvent)=> ({})
但它给了我另一个错误,似乎问题出在 rxjs 无法检测到点击事件不同于简单事件;
解决这个奇怪问题的最佳解决方案是什么?
更新:原因及答案:
感谢@Prince
我发现,fromEvent 仅发出 "event type",这意味着它可以告诉我们哦,我收到了一个事件。
所以我们应该告诉它把事件转换成曾经发生过的事件(在这个例子中是 MouseEvent),这样它就可以按照我们想要的方式工作,就像我们对 html 输入类型所做的那样,以防止使用值时出现类型错误:
const search_elm = document.getElementById("search")! as HTMLInputElement;
search_elm.value="10";
您可以使用以下运算符(fromEvent、pluck、filter、first)来实现此目的。请查找内嵌描述。
const source = fromEvent(document, 'click')
.pipe(
map(event => {
const e = event as MouseEvent;
return {x: e.clientX, y:e.clientY};
}),
filter((obj) => obj.y > 200),
first(),
);
source.subscribe(x => console.log(x));
这里是 stackblitz link:https://stackblitz.com/edit/rxjs-ccrz9x