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

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

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

ساختار HTML

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

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

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

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

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

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

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

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

document.addEventListener(&quotclick&quot, function(event) {
    var flyoutEl = document.getElementById(&quotflyout-example&quot);
    var targetEl = event.target;

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

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

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

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

مهدی نیسی

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

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