خواندن ۲ دقیقه·۵ سال پیش

چطور تشخیص بدیم که بیرون یک المنت کلیک شده؟

یکی از کاربردی ترین الگوها در جاوااسکریپت، تشخیص کلیک روی یک المنت است. به صورت مثال یک dropdown داریم که میخواهیم زمانی که بیرون dropdown کلیک شد، بسته شود.

ساختار HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
    </head>
    <body>
        <div id="flyout-example" class="flyout">
            <h5 class="flyout-title">This could be a flyout;</h5>
            <div id="flyout-debug" class="flyout-debug"></div>
            <div class="flyout-buttons">
                <button class="button button-outline">Cancel</button>
                <button class="button">OK</button>
            </div>
        </div>
    </body>
</html>

برای تشخیص کلیک در خارج از یک المنت، بهتر است یک listener به document اضافه کنید. در نتیجه توی حلقه اصلی، DOM رو از المنت کلیک شده تا document سرچ میکنه تا به container اون المنت برسه.

کد جاوااسکریپت این برنامه با ویژگی‌های ES6 به این شکل هستش:

document.addEventListener("click", event => {
    const flyoutEl = document.getElementById("flyout-example");
    let targetEl = event.target; // المنت کلیک شده

    do {
        if (targetEl == flyoutEl) {
            // اینجا کاربر داخل المنت کلیک کرده، پس نیازی نیست کاری انجام بدید
            return document.getElementById("flyout-debug").textContent = "Clicked inside!"
        }

        // دنبال المنت مورد نظر برید
        targetEl = targetEl;
    } while (targetEl);

    // بیرون المنت کلیک شده، پس هر کاری دوست داشتید انجام بدید
    document.getElementById("flyout-debug").textContent = "Clicked outside!"
});

توجه کنید این کد در مرورگرهای مدرن اجرا می‌شود. اگر میخواهید در مرورگرهای قدیمی هم اجرا شود، از کد زیر استفاده کنید.

document.addEventListener("click", function(event) {
    var flyoutEl = document.getElementById("flyout-example");
    var targetEl = event.target;

    do {
        if (targetEl == flyoutEl) {
            // اینجا کاربر داخل المنت کلیک کرده، پس نیازی نیست کاری انجام بدید
            return document.getElementById("flyout-debug").textContent = "Clicked inside!"
        }

        // دنبال المنت مورد نظر برید
        targetEl = targetEl;
    } while (targetEl);

    // بیرون المنت کلیک شده، پس هر کاری دوست داشتید انجام بدید     
    document.getElementById("flyout-debug").textContent = "Clicked outside!"
});

جاوااسکریپتفرانت اندطراحی وب

مهدی نیسی

فرانت‌اند دولوپر

شاید از این پست‌ها خوشتان بیاید

مهدی نیسی

خواندن ۲ دقیقه·۵ سال پیش

چطور تشخیص بدیم که بیرون یک المنت کلیک شده؟

ساختار HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Title of the document</title>
    </head>
    <body>
        <div id="flyout-example" class="flyout">
            <h5 class="flyout-title">This could be a flyout;</h5>
            <div id="flyout-debug" class="flyout-debug"></div>
            <div class="flyout-buttons">
                <button class="button button-outline">Cancel</button>
                <button class="button">OK</button>
            </div>
        </div>
    </body>
</html>

کد جاوااسکریپت این برنامه با ویژگی‌های ES6 به این شکل هستش:

document.addEventListener("click", event => {
    const flyoutEl = document.getElementById("flyout-example");
    let targetEl = event.target; // المنت کلیک شده

    do {
        if (targetEl == flyoutEl) {
            // اینجا کاربر داخل المنت کلیک کرده، پس نیازی نیست کاری انجام بدید
            return document.getElementById("flyout-debug").textContent = "Clicked inside!"
        }

        // دنبال المنت مورد نظر برید
        targetEl = targetEl;
    } while (targetEl);

    // بیرون المنت کلیک شده، پس هر کاری دوست داشتید انجام بدید
    document.getElementById("flyout-debug").textContent = "Clicked outside!"
});

document.addEventListener("click", function(event) {
    var flyoutEl = document.getElementById("flyout-example");
    var targetEl = event.target;

    do {
        if (targetEl == flyoutEl) {
            // اینجا کاربر داخل المنت کلیک کرده، پس نیازی نیست کاری انجام بدید
            return document.getElementById("flyout-debug").textContent = "Clicked inside!"
        }

        // دنبال المنت مورد نظر برید
        targetEl = targetEl;
    } while (targetEl);

    // بیرون المنت کلیک شده، پس هر کاری دوست داشتید انجام بدید     
    document.getElementById("flyout-debug").textContent = "Clicked outside!"
});

جاوااسکریپتفرانت اندطراحی وب

مهدی نیسی

فرانت‌اند دولوپر

شاید از این پست‌ها خوشتان بیاید