Koordinat mouse adalah posisi mouse yang dilihat dari sumbu x dan sumbu y ketika digerakkan. Dan pada kesempatan kali ini saya akan membahasnya pad artikel yang berjudul Cara Mengetahui Koordinat Mouse Dengan AngularJs.

Langkah pertama yang harus dilakukan adalah teman teman jangan lupa cantumkan link angularjs di dalam tag head html. Dan berikut ini link dari angularjsnya.

Langkah kedua Cara Mengetahui Koordinat Mouse Dengan AngularJs kita akan mulai terlebih dahulu untuk membuat sebuah modul dan controller seperti script di bawah ini.

Disini saya buat modul angularjs untuk saya gunakan membuat sebuah controller yang di dalamnya terdapat dau parameter. Parameter kedua adalah sebuah fungsi dengan $scope didalamnya dan saya buat lagi fungsi dengan nama myFunc() dengan parameter myE. Untuk mencari titik koordinat mouse saya buat variable x dan y di dalam fungsi myFunc() dengan nilai myE disambung metode clientX dan clientY.

Dan langkah selanjutnya saya akan membuat struktur htmlnya seperti script di bawah ini.

Disini saya membuat sebuah div dengan memberikan ng-app=”myApp” dan ng-controller=”myCtrl” yang didalamnya saya buat h1 untuk saya arahkan mouse di atas h1 untuk mengukur titik koordinat dari mouse terhadap elemen h1. Sehingga di dapat h1 saya berikan ng-mousemove=”myFunc($event)” untuk menjalankan fungsi yang sudah dibuat didalam controller. Dan saya buat tag p untuk mencetak hasil dari koordinat mouse berdasarkan sumbu x dan sumbu y.

Jika saya tampilkan di halaman browser maka akan seperti gambar di bawah ini tampilannya. Dimana titik koordinat sumbu x dan y saya pisahkan dengan koma untuk mencetaknya.

Cara Mengetahui Koordinat Mouse Dengan AngularJs

Demikian artikel tentang Cara Mengetahui Koordinat Mouse Dengan AngularJs. Semoga dapat bermanfaat dan selamat mencoba