現在、Ionic4/stencil アプリ (PWA ツールキット: https://ionicframework.com/pwa/toolkitを使用) を開発しており、コンポーネントの位置を取得する際に問題が発生します。
@Component({
tag: 'app-projects-gallery',
styleUrl: 'app-projects-gallery.scss'
})
export class AppProjectsGallery {
/* some code here*/
*/
private computeGridProperties() {
/* some code here*/
}
getPos(id: number, e) {
var element = document.getElementById("img" + id);
var r = element.getBoundingClientRect();
console.log("event" + e);
console.log("Les dimensions du rectangle sont :");
console.log("{top:" + r.top + ", left:" + r.left + ", right:" + r.right
+ ", bottom:" + r.bottom + "}");
}
render() {
return (
<ion-page>
<ion-content>
<ion-grid>
<ion-row>
{this.projets.map((projet) => {
return <ion-col class={'column-' + this.cardsPerRow}>
<ion-button onClick={this.getPos.bind(this, this.projets.indexOf(projet))} href={`/project_infos/${this.projets.indexOf(projet)}`} >
<img id={"img" + this.projets.indexOf(projet)}
class='project-logo'
src={this.rootPath + projet.directoryName + '/logo' + this.fileExtension} />
</ion-button>
</ion-col>
})}
</ion-row>
</ion-grid>
</ion-content>
</ion-page>
);
}
}
ユーザーがイオン ボタンをクリックすると、位置を取得する画像の ID を指定して getPos() メソッドを呼び出します。
ボタンをクリックすると、すべてが正常に機能し、コンソールに img の適切な位置が表示されます。
event[object MouseEvent]
app-projects-gallery.js:69 Les dimensions du rectangle sont :
app-projects-gallery.js:70 {top:79, left:144.046875, right:215.921875,
bottom:151.15625}
しかし、画像をもう一度クリックすると、{0,0,0,0} 座標が得られます...
event[object MouseEvent]
app-projects-gallery.js:69 Les dimensions du rectangle sont :
app-projects-gallery.js:70 {top:0, left:0, right:0, bottom:0}
これについての説明はありますか？
前もって感謝します、