From eb4a6d0adfbfd03432b0550ecf403ddb3bd70106 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Fri, 19 Jan 2024 17:24:01 +0330 Subject: [PATCH 1/6] update article.md -- browser default actions --- .../04-default-browser-action/article.md | 157 +++++++++--------- 1 file changed, 81 insertions(+), 76 deletions(-) diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index 0fa00cff1..0b339ac3b 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -1,23 +1,23 @@ -# Browser default actions +# اقدامات پیشفرض مرورگر -Many events automatically lead to certain actions performed by the browser. +بسیاری از رویدادها اقدامات خودبه‌‍خودی از سمت مرورگر را در پی دارند -For instance: +برای نمونه: -- A click on a link - initiates navigation to its URL. -- A click on a form submit button - initiates its submission to the server. -- Pressing a mouse button over a text and moving it - selects the text. +- یک کلیک بر روی لینک - شما را به آدرس موردنظر میرساند +- یک کلیک روی دکمه ارسال فرم - تایید و ارسال فرم به سرور آغاز می‌شود. +- فشردن دکمه ماوس برروی متن و حرکت دادن آن - متن را انتخاب می‌کند -If we handle an event in JavaScript, we may not want the corresponding browser action to happen, and want to implement another behavior instead. +اگر بخواهیم که یک رویداد را در جاوااسکریپت مدیریت کنیم، ممکن است نخواهیم تا اکشن پیشفرض مرورگر اتفاق بیفتد، و بخواهیم که رفتار متفاوتی به جای آن را پیاده‌سازی کنیم. -## Preventing browser actions +## جلوگیری از اقدامات مرورگر -There are two ways to tell the browser we don't want it to act: +دو راه برای اینکه به مرورگر بگوییم نمیخواهیم تا رفتار پیشفرض را انجام دهد وجود دارد: -- The main way is to use the `event` object. There's a method `event.preventDefault()`. -- If the handler is assigned using `on` (not by `addEventListener`), then returning `false` also works the same. +- راه اصلی استفاده از آبجکت `event` است. متدی به نام `event.preventDefault()` وجود دارد. +- اگر هندلر با استفاده از `on` مشخص شده باشد (نه با `addEventListener`) آنگاه بازگرداندن مقدار `false` به طرز مشابه عمل خواهد کرد. -In this HTML, a click on a link doesn't lead to navigation; the browser doesn't do anything: +در این فایل HTML, کلیک بر روی یک لینک منجر به تغییر آدرس مروگر نمی‌شود; مرورگر کاری نمی‌کند: ```html autorun height=60 no-beautify Click here @@ -25,19 +25,20 @@ or here ``` -In the next example we'll use this technique to create a JavaScript-powered menu. +در مثال بعدی ما از این تکنیک برای ایجاد یک منو با جاوااسکریپت استفاده خواهیم کرد. ```warn header="Returning `false` from a handler is an exception" -The value returned by an event handler is usually ignored. +مقدار بازگردانده شده توسط یک هندلر معمولا نادیده گرفته می‌شود. -The only exception is `return false` from a handler assigned using `on`. +تنها استثنا برگردانده شند `return false` از یک هندلر اختصاص داده شده با استفاده از `on` است. -In all other cases, `return` value is ignored. In particular, there's no sense in returning `true`. -``` +در همه‌ی موارد دیگر مقدار `return` نادیده گرفته می‌شود. به طور خاص بازگرداندن `true` هیچ معنایی ندارد. + +```` -### Example: the menu +### مثال: منو -Consider a site menu, like this: +برای مثال منوی یک سایت را درنظر بگیرید: ```html -``` +```` -Here's how it looks with some CSS: +با مقدار CSS اینطور به نظر می‌رسد: [iframe height=70 src="menu" link edit] -Menu items are implemented as HTML-links ``, not buttons ` ``` @@ -181,25 +185,26 @@ Now the button-level menu works as intended. But the price is high. We forever d An alternative solution would be to check in the `document` handler if the default action was prevented? If it is so, then the event was handled, and we don't need to react on it. - ```html autorun height=80 no-beautify run -

Right-click for the document menu (added a check for event.defaultPrevented)

+

+ Right-click for the document menu (added a check for event.defaultPrevented) +

``` @@ -217,9 +222,9 @@ The object will catch any right-click, look through stored handlers and run the But then each piece of code that wants a context menu should know about that object and use its help instead of the own `contextmenu` handler. ``` -## Summary +## خلاصه -There are many default browser actions: +اکشن های دیفالت مختلفی وجود دارند: - `mousedown` -- starts the selection (move the mouse to select). - `click` on `` -- checks/unchecks the `input`. @@ -228,11 +233,11 @@ There are many default browser actions: - `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu. - ...there are more... -All the default actions can be prevented if we want to handle the event exclusively by JavaScript. +اگر بخواهیم تا ایونت را به طور خاص با جاوااسکریپت هندل کنیم می‌توانیم از همه‌ی اکشن‌های پیشفرض جلوگیری کنیم. -To prevent a default action -- use either `event.preventDefault()` or `return false`. The second method works only for handlers assigned with `on`. +برای جلوگیری از یک اکشن پیشفرض میتوانیم از `event.preventDefault()` یا `return false` استفاده کنیم. دومین متد تنها برای هندلرهای اختصاص یافته با `on` کار می‌کند. -If the default action was prevented, the value of `event.defaultPrevented` becomes `true`, otherwise it's `false`. +اگر از اکشن پیشفرض جلوگیری شده باشد مقدار `event.defaultPrevented` به `true` تغییر می‌کند در غیراینصورت `false` می‌شود. ```warn header="Stay semantic, don't abuse" Technically, by preventing default actions and adding JavaScript we can customize the behavior of any elements. For instance, we can make a link `
` work like a button, and a button ` @@ -134,9 +134,9 @@ By default the browser on `contextmenu` event (right mouse click) shows a contex ``` -Now, in addition to that context menu we'd like to implement document-wide context menu. +حالا علاوه بر context menu میخواهیم تا یک منو به وسعت داکیومنت پیاده‌سازی کنیم. -Upon right click, the closest context menu should show up. +با کلیک‌راست نزدیک‌ترین context menu ظاهر خواهد شد. ```html autorun height=80 no-beautify run

Right-click here for the document context menu

@@ -155,14 +155,15 @@ Upon right click, the closest context menu should show up. ``` -The problem is that when we click on `elem`, we get two menus: the button-level and (the event bubbles up) the document-level menu. +مشکل این است زمانی که برروی `elem` کلیک کنیم دو منو خواهیم داشت: منوی تعریف شده برروی دکمه و (زمانی که رویداد bubble up می‌کند) منوی تعریف شده در داکیومنت. -How to fix it? One of solutions is to think like: "When we handle right-click in the button handler, let's stop its bubbling" and use `event.stopPropagation()`: +چطور این مسئله را فیکس کنیم؟ یکی از راه‌حل ها این است: "زمانی که که میخواهیم کلیک‌راست را در هندلر دکمه هندل کنیم بیاید تا bubbling آن را متوقف کرده" و از `()event.stopPropagation` استفاده کنیم. ```html autorun height=80 no-beautify run

Right-click for the document menu

``` -Now the button-level menu works as intended. But the price is high. We forever deny access to information about right-clicks for any outer code, including counters that gather statistics and so on. That's quite unwise. +حالا منوی تعریف شده برروی دکمه همانطور که میخواستیم کار می‌کند. اما هزینه اینکار بالاست. ما برای همیشه دسترسی به اطلاعات راجع به کلیک راست را برای کدهای بیرونی قطع میکنیم که شامل شمارنده‌هایی که آمار و امثالهم را جمع میکنند میشود. که اینکار هوشمندانه نیست. -An alternative solution would be to check in the `document` handler if the default action was prevented? If it is so, then the event was handled, and we don't need to react on it. +یک راه‌حل جایگزین بررسی هندلر `document` و اینکه آیا اکشن جلوگیری شده یا نه می‌باشد. اگر اینگونه است آنگاه رویداد هندل شده و نیازی به واکنش به آن نیست. ```html autorun height=80 no-beautify run

@@ -208,18 +209,20 @@ An alternative solution would be to check in the `document` handler if the defau ``` -Now everything also works correctly. If we have nested elements, and each of them has a context menu of its own, that would also work. Just make sure to check for `event.defaultPrevented` in each `contextmenu` handler. +حالا همه چیز به درستی کار میکند. این راه حل حتی اگر المنت‌های تودرتویی داشته باشیم که هرکدام منوی خودشان را داشته باشند هم کار می‌کند. فقط اطمینان حاصل کنید که `event.defaultPrevented` در هر یک از هندلرهای `contextmenu` چک می‌شود. ```smart header="event.stopPropagation() and event.preventDefault()" As we can clearly see, `event.stopPropagation()` and `event.preventDefault()` (also known as `return false`) are two different things. They are not related to each other. +به خوبی میتوانیم ببینیم که `event.stopPropagation()` و `event.preventDefault()` (که همچنین به عنوان `return false` شناخته می‌شود) دو چیز متفاوت از هم هستند که به یکدیگر ربطی ندارند. ``` ```smart header="Nested context menus architecture" +همچنین راه‌های جایگزینی برای پیاده‌‍سازی منوهای تودرتو وجود دارد. There are also alternative ways to implement nested context menus. One of them is to have a single global object with a handler for `document.oncontextmenu`, and also methods that allow us to store other handlers in it. -The object will catch any right-click, look through stored handlers and run the appropriate one. +آبجت هرگونه کلیک راستی را گرفته، نگاهی به هندلرهای آن می‌اندازد و هندلر مناسب را اجرا میکند. -But then each piece of code that wants a context menu should know about that object and use its help instead of the own `contextmenu` handler. +اما در اینصورت هر تکه کدی که بخواهد context menu داشته باشد باید راجع به آن آبجکت بداند و به جای هندلر `contextmenu` خودش از کمک آن آبجکت گلوبال استفاده کند. ``` ## خلاصه From 648043e9d90fdb758df1e5f3011f36c74cc8d8d7 Mon Sep 17 00:00:00 2001 From: Mohammad Hosein Date: Fri, 19 Jan 2024 19:34:59 +0330 Subject: [PATCH 3/6] wip: update article.md -- default browser action --- .../04-default-browser-action/article.md | 54 +++++++++---------- 1 file changed, 25 insertions(+), 29 deletions(-) diff --git a/2-ui/2-events/04-default-browser-action/article.md b/2-ui/2-events/04-default-browser-action/article.md index 57fe4cc1f..42b816bff 100644 --- a/2-ui/2-events/04-default-browser-action/article.md +++ b/2-ui/2-events/04-default-browser-action/article.md @@ -20,9 +20,9 @@ در این فایل HTML, کلیک بر روی یک لینک منجر به تغییر آدرس مروگر نمی‌شود; مرورگر کاری نمی‌کند: ```html autorun height=60 no-beautify -Click here +اینجا را کلیک کنید or -here +اینجا ``` در مثال بعدی ما از این تکنیک برای ایجاد یک منو با جاوااسکریپت استفاده خواهیم کرد. @@ -79,7 +79,6 @@ menu.onclick = function(event) { درضمن استفاده از event delegation در اینجا منوی ما را بسیار انعطاف پذیر می‌کند. چون می‌توانیم از لیست‌های تودرتو استفاده کرده و آنرا با استفاده از CSS استایل دهیم. مثل استایل "slide down" ````smart header="Follow-up events" -Certain events flow one into another. If we prevent the first event, there will be no second. رویدادهای مشخص در یکدیگر جاری میشوند. اگر از اولی جلوگیری کنیم رویداد دومی وجود نخواهد داشت. برای مثال رویداد `mousedown` برروی `` منجر به فوکوس آن و رویداد فوکوس می‌شود. اگر از رویداد `mousedown` جلوگیری کنیم آنگاه فوکوسی نخواهیم داشت. @@ -127,10 +126,10 @@ Certain events flow one into another. If we prevent the first event, there will به صورت پیشفرض مروگر در پاسخ به ایونت `contextmenu` (کلیک راست ماوس) یک منو با آپشن‌های استاندارد را نمایش می‌دهد. ما می‌توانیم از این موضوع جلوگیری کرده و منوی خودمان را نمایش دهیم. به اینصورت: ```html autorun height=50 no-beautify run - + ``` @@ -139,8 +138,8 @@ Certain events flow one into another. If we prevent the first event, there will با کلیک‌راست نزدیک‌ترین context menu ظاهر خواهد شد. ```html autorun height=80 no-beautify run -

Right-click here for the document context menu

- +

برای context menu داکیومنت اینجا کلیک راست کنید

+ ``` @@ -187,19 +187,19 @@ menu.onclick = function(event) { ```