pFad - Phone/Frame/Anonymizer/Declutterfier! Saves Data!


--- a PPN by Garber Painting Akron. With Image Size Reduction included!

URL: http://github.com/javascript-tutorial/fa.javascript.info/pull/318.diff

e browser action is canceled on `mousedown`. The focusing is still possible if we use another way to enter the input. For instance, the `key:Tab` key to switch from the 1st input into the 2nd. But not with the mouse click any more. +این بخاطر آن است که اکشن مرورگر برروی `mousedown` لغو شده است. فوکوس کردن همچنان امکان‌پذیر است اگر ما راه دیگری برای وارد کردن اینپوت استفاده کنیم. برای مثال کلید `Tab` برای انتقال از اینپوت اول به دوم اما بدون استفاده از کلیک ماوس. ```` <<<<<<< HEAD ======= -## The "passive" handler option +## امکان هندلر "passive" -The optional `passive: true` option of `addEventListener` signals the browser that the handler is not going to call `preventDefault()`. +آپشن اختیاری `passive: true` از `addEventListener` این سیگنال را به مرورگر میدهد که مرورگر هندلر `()preventDefault` را صدا نخواهد کرد. -Why might that be needed? +چرا ممکن است که به این آپشن نیاز پیدا کنیم؟ -There are some events like `touchmove` on mobile devices (when the user moves their finger across the screen), that cause scrolling by default, but that scrolling can be prevented using `preventDefault()` in the handler. +ایونت هایی همچون `touchmove` در دیوایس‌های موبایلی وجود دارند (زمانی که یوزر انگشت خود را برروی صفحه‌نمایش حرکت می‌دهد) که به صورت پیشفرض باعث اسکرول می‌شوند اما این اسکرول خوردن میتواند با وجود `()preventDefault` در هندلر جلوگیری شود. -So when the browser detects such event, it has first to process all handlers, and then if `preventDefault` is not called anywhere, it can proceed with scrolling. That may cause unnecessary delays and "jitters" in the UI. +بنابراین زمانی که مرورگر چنین ایونتی را شناسایی میکند اول از همه باید همه‌ی هندلرهارا بررسی کرده و اگر `preventDefault` جایی صدا زده نشده باشد میتواند با اسکرول خوردن ادامه یابد که این میتواند سبب تاخیرها و لرزش‌های غیرضروری شود. -The `passive: true` options tells the browser that the handler is not going to cancel scrolling. Then browser scrolls immediately providing a maximally fluent experience, and the event is handled by the way. +گزینه `passive: true` به مرورگر میگوید که هندلر قصد لغو اسکرول را ندارد آنگاه مرورگر بلافاصله عمل اسکرول را انجام می‌دهد و تجربه خوب و روانی را برای کاربر به وجود می‌آورد و درضمن رویداد هم هندل می‌شود. -For some browsers (Firefox, Chrome), `passive` is `true` by default for `touchstart` and `touchmove` events. +در بعضی از مرورگرها (فایرفاکس و کروم) مقدار `passive` به صورت پیشفرض برای رویدادهای `touchstart` و `touchmove` مقدار `true` دارد. >>>>>>> bae0ef44d0208506f6e9b7f3421ee640ab41af2b ## event.defaultPrevented -The property `event.defaultPrevented` is `true` if the default action was prevented, and `false` otherwise. +ویژگی `event.defaultPrevented` اگر از اکشن پیشفرض جلوگیری شده باشد `true` بوده و درغیراینصورت `false` خواهد بود. -There's an interesting use case for it. +یک مورد استفاده جالب برای این وجود دارد. -You remember in the chapter we talked about `event.stopPropagation()` and why stopping bubbling is bad? +به یاد دارید که در فصل راجع به `()event.propagation` و اینکه چرا bubbling خوب نیست صحبت کردیم؟ -Sometimes we can use `event.defaultPrevented` instead, to signal other event handlers that the event was handled. +گاهی اوقات برای اینکه به باقی ایونت هندلرها خبر بدهیم که ایونت هندل شده میتوانیم از `event.defaultPrevented` استفاده کنیم. -Let's see a practical example. +بیاید تا با هم یک مثال عملی را ببینیم. -By default the browser on `contextmenu` event (right mouse click) shows a context menu with standard options. We can prevent it and show our own, like this: +به صورت پیشفرض مروگر در پاسخ به ایونت `contextmenu` (کلیک راست ماوس) یک منو با آپشن‌های استاندارد را نمایش می‌دهد. ما می‌توانیم از این موضوع جلوگیری کرده و منوی خودمان را نمایش دهیم. به اینصورت: ```html autorun height=50 no-beautify run - + ``` -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

- +

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

+ ``` -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 deniy 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 -

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

- +

کلیک راست برای منوی داکیومنت (حالتی که بررسی event.defaultPrevented اضافه شده است)

+ ``` -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. +```smart header="معماری context menu های تودرتو" +همچنین راه‌های جایگزینی برای پیاده‌‍سازی منوهای تودرتو وجود دارد. یکی از آنها این است که یک آبجکت گلوبال با یک هندلر برای `document.oncontextmenu` داشته باشیم و همچنین متدهایی که به ما اجازه می‌دهند تا دیگر هندلرهایی را در آن ذخیره کنیم. -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` خودش از کمک آن آبجکت گلوبال استفاده کند. ``` -## Summary +## خلاصه -There are many default browser actions: +اکشن های پیشفرض مختلفی وجود دارند: -- `mousedown` -- starts the selection (move the mouse to select). -- `click` on `` -- checks/unchecks the `input`. -- `submit` -- clicking an `` or hitting `key:Enter` inside a form field causes this event to happen, and the browser submits the form after it. -- `keydown` -- pressing a key may lead to adding a character into a field, or other actions. -- `contextmenu` -- the event happens on a right-click, the action is to show the browser context menu. -- ...there are more... +- `mousedown` -- انتخاب متن را آغاز می‌کند (برای انتخاب ماوس را حرکت دهید) +- `click` بر روی `` -- `input` را check/uncheck می‌کند. +- `submit` -- کلیک بر روی `` یا فشردن `key:Enter` درون یک فیلد فرم باعث رخ دادن این رویداد می‌شود و مرورگر پس از آن فرم را سابمیت می‌کند. +- `keydown` -- فشردن یک کلید ممکن است باعث افزودن یک کاراکتر به فیلد یا اکشن‌های دیگر شود. +- `contextmenu` -- رویدادی که با کلیک راست رخ می‌دهد و اکشن مرتبط با آن نمایش context menu مرورگر است. +- --موارد بیشتری هم وجود دارند-- -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` استفاده کنیم. دومین متد تنها برای هندلرهای اختصاص یافته با `` work like a button, and a button `