👔MouseEvent+ext

browser ⟩ event ⟩ type ⟩ mouse ⟩ +ext

extend MouseEvent.

// 🔸 .pointInViewport
// 🔸 .pointInPage
// 🔸 .pointInScreen
// 🔹 .pointInElement()

👉 custom

💾 程式

• replit ⟩ click to move ball

// 2023.01.21 - 12:20 (•) first draft
// -------------------------------------------------------

// ⭐ import
import {vec, linearCombination} from './Vector.js';       // 👔 Vector
// -------------------------------------------------------

// ⭐ MouseEvent + ext
// -------------------------------------------------------
// 🔸 .pointInViewport
// 🔸 .pointInPage
// 🔸 .pointInScreen
// 🔹 .pointInElement()
//
Object.defineProperties(MouseEvent.prototype, {
    
    // 🔸 .pointInViewport
    pointInViewport: {
        get() {
            return vec(this.clientX, this.clientY);
        },
    },

    // 🔸 .pointInPage
    pointInPage: {
        get() {
            return vec(this.pageX, this.pageY);
        },
    },

    // 🔸 .pointInScreen
    pointInScreen: {
        get() {
            return vec(this.screenX, this.screenY);
        },
    },

    // 🔹 .pointInElement()
    // - relative to element's "padding box" origin
    pointInElement: {
        value: function(elem = this.target) {
            const a = this.pointInViewport;
            const b = elem.boundingBox.origin;
            const c = elem.paddingBox.origin;
            // v = a - (b + c)
            return linearCombination([1, -1, -1], [a, b, c]);
        },
    },
    
});

// ⭐ export
export {};        // ES module

💈範例

🗺️ 圖表

📗 參考

📘 手冊