From 018d1509e30cca0e2a82404c549c45ebc1e8ab0b Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Sun, 12 Sep 2021 03:14:54 +0430 Subject: [PATCH 01/15] Update article.md --- .../article.md | 92 +++++++++---------- 1 file changed, 46 insertions(+), 46 deletions(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index d409c3f12..a154dc348 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -1,78 +1,78 @@ -# Moving the mouse: mouseover/out, mouseenter/leave +# حرکت موس: روی/بیرون‌از عنصر، ورود/خروج‌از عنصر -Let's dive into more details about events that happen when the mouse moves between elements. +اکنون درباره رویدادهایی که با حرکت موس بین عناصر صفحه اتفاق می‌افتد، بیشتر صحبت میکنیم. -## Events mouseover/mouseout, relatedTarget +## رویدادهای mouseover/mouseout, relatedTarget -The `mouseover` event occurs when a mouse pointer comes over an element, and `mouseout` -- when it leaves. +رویداد `mouseover` زمانی اتفاق می‌افتد که اشاره‌گر موس روی یک عنصر می‌رود, و `mouseout` -- زمانی که از روی آن بیرون می‌رود. ![](mouseover-mouseout.svg) -These events are special, because they have property `relatedTarget`. This property complements `target`. When a mouse leaves one element for another, one of them becomes `target`, and the other one - `relatedTarget`. +این‌ها رویدادهای خاصی هستند، زیرا یک خاصیت به نام `relatedTarget` دارند. این خاصیت به نوعی متمم `target` خواهد بود. زمانی که اشاره‌گر موس یک عنصر را با ورودی به عنصر دیگر ترک می‌کند، یکی از آن‌ها `target`، و دیگری `relatedTarget` خواهد بود. -For `mouseover`: +برای `mouseover`: -- `event.target` -- is the element where the mouse came over. -- `event.relatedTarget` -- is the element from which the mouse came (`relatedTarget` -> `target`). +- `event.target` -- عنصری خواهدبود که اشاره‌گر موس روی آن رفته‌است. +- `event.relatedTarget` -- عنصری خواهد بود که اشاره‌گر موس آنرا ترک کرده، به صورت: (`relatedTarget` -> `target`). -For `mouseout` the reverse: +برای `mouseout` برعکس است: -- `event.target` -- is the element that the mouse left. -- `event.relatedTarget` -- is the new under-the-pointer element, that mouse left for (`target` -> `relatedTarget`). +- `event.target` -- عنصری خواهد بود که اشاره‌گر موس آنرا ترک‌کرده. +- `event.relatedTarget` -- عنصری خواهد بود که زیر اشاره‌گر موس قرار می‌گیرد، به صورت: (`target` -> `relatedTarget`). ```online -In the example below each face and its features are separate elements. When you move the mouse, you can see mouse events in the text area. +در مثال زیر هر چهره و اجزای آن عناصر جداگانه هستند. زمانی که اشاره‌گر موس‌ را روی آن‌ها حرکت دهید، رویدادهایی که اتفاق می‌افتند را مشاهده خواهید کرد. -Each event has the information about both `target` and `relatedTarget`: +هر رویداد اطلاعاتی درباره هر دو `target` و `relatedTarget` دارد: [codetabs src="mouseoverout" height=280] ``` -```warn header="`relatedTarget` can be `null`" -The `relatedTarget` property can be `null`. +```warn header="`relatedTarget` می‌تواند `null` باشد" +خاصیت `relatedTarget` می‌تواند است `null` باشد. -That's normal and just means that the mouse came not from another element, but from out of the window. Or that it left the window. +این عادی است و فقط به این معنی است که اشاره‌گر موس از عنصر دیگری نیامده، بلکه از خارج از پنجره مرورگر وارد شده. یا اینکه با خارج شدن، از پنجره مرورگر خارج شده. -We should keep that possibility in mind when using `event.relatedTarget` in our code. If we access `event.relatedTarget.tagName`, then there will be an error. +ما باید این احتمال را هنگام استفاده از `event.realtedTarget` در کد به یاد داشته باشیم. اگر ما سعی کنیم که `event.relatedTarget.tagName` دسترسی پیدا کنیم، با خطا مواجه خواهیم شد. ``` -## Skipping elements +## پرش از روی عناصر -The `mousemove` event triggers when the mouse moves. But that doesn't mean that every pixel leads to an event. +رویداد `mousemove` زمانی اتفاق می‌افتد که اشاره‌گر موس حرکت کند. اما به این معنی نیست که برای هر پیکسل این رویداد اتفاق بیفتد. -The browser checks the mouse position from time to time. And if it notices changes then triggers the events. +مرورگر موقعیت اشاره‌گر موس را هرچند وقت بسیار کوتاه یکبار چک می‌کند. و اگر تغییری را ببیند رویداد را صدا می‌زند. -That means that if the visitor is moving the mouse very fast then some DOM-elements may be skipped: +به این معنی که اگر بازدیدکننده موس را سریع حرکت دهد، ممکن است بعضی از عناصر داخل DOM از قلم بیفتند: ![](mouseover-mouseout-over-elems.svg) -If the mouse moves very fast from `#FROM` to `#TO` elements as painted above, then intermediate `
` elements (or some of them) may be skipped. The `mouseout` event may trigger on `#FROM` and then immediately `mouseover` on `#TO`. +اگر که موس از `#FROM` سریعا به `#TO` حرکت کند، مانند شکل بالا، عناصر `
` وسطی (یا بعضی از آن‌ها) ممکن‌است از قلم بیفتند. رویداد `mouseout` ممکن است روی `#FROM` و بعد از آن سریعا `mouseover` روی `#TO` اتفاق بیفتد. -That's good for performance, because there may be many intermediate elements. We don't really want to process in and out of each one. +این برای کارایی برنامه خوب است، چون ممکن است از روی تعداد زیاد عنصر بین دو عنصر عبور کند. در عمل معمولا نمی‌خواهیم همه‌ای این ورود و خروج از تک تک عناصر را پردازش کنیم. -On the other hand, we should keep in mind that the mouse pointer doesn't "visit" all elements along the way. It can "jump". +از طرف دیگر، باید در نظر داشته باشیم که اشاره‌گر موس همیشه همه‌ی عناصر را در طول مسیر حرکتش "ملاقات" نمی‌کند. ممکن است "پرش" کند. -In particular, it's possible that the pointer jumps right inside the middle of the page from out of the window. In that case `relatedTarget` is `null`, because it came from "nowhere": +در حالت خاصی، ممکن است که اشاره‌گر موس از بیرون از پنجره مرورگر، دقیقا داخل یک عنصر پرش کند. در این حالت `realtedTarget` مقدار `null` خواهد داشت، چون اشاره‌گر عملا از "ناکجا آباد" آمده است: ![](mouseover-mouseout-from-outside.svg) ```online -You can check it out "live" on a teststand below. +می‌توانید این رفتار را به صورت زنده در قسمت آزمایشی زیر ببینید. -Its HTML has two nested elements: the `
` is inside the `
`. If you move the mouse fast over them, then maybe only the child div triggers events, or maybe the parent one, or maybe there will be no events at all. +کد اچ‌تی‌ام‌ال دارای دو عنصر تو در تو است: عنصر `
` داخل عنصر `
` قرار گرفته است. اگر که اشاره‌گر موس را سریعا روی آنها حرکت دهید، ممکن است که فقط عنصر فرزند رویداد را صدا بزند، یا شاید عنصر پدر، حتی ممکن است اصلا رویداد اتفاق نیفتد. -Also move the pointer into the child `div`, and then move it out quickly down through the parent one. If the movement is fast enough, then the parent element is ignored. The mouse will cross the parent element without noticing it. +همچنین اشاره‌گر را داخل `div` فرزند ببرید، و سپس آنرا از روی عنصر پدر، با پایین بردن اشاره‌گر از روی عنصر فرزند خارج کنید. اگر حرکت به اندازه کافی سریع باشد، عنصر پدر نادیده گرفته خواهد شد. اشاره‌گر موس از روی عنصر پدر بدون توجه به آن عبور می‌کند. [codetabs height=360 src="mouseoverout-fast"] ``` -```smart header="If `mouseover` triggered, there must be `mouseout`" -In case of fast mouse movements, intermediate elements may be ignored, but one thing we know for sure: if the pointer "officially" entered an element (`mouseover` event generated), then upon leaving it we always get `mouseout`. +```smart header="اگر `mouseover` اتفاق بیفتد, حتما `mouseout` اتفاق خواهد افتاد" +در صورت حرکت سریع اشاره‌گر موس، عناصر بین حرکت ممکن است نادیده گرفته‌‌شوند، اما چیزی که از آن مطمئن هستیم این است که: اگر اشاره‌گر موس "رسما" وارد یک عنصر شود (رویداد `mouseover` اتفاق بیفتند)، هنگام ترک این عنصر همیشه رویداد `mouseout` نیز اتفاق خواهد افتاد. ``` -## Mouseout when leaving for a child +## رویداد mouseout وقتی اشاره‌گر وارد عنصر فرزند می‌شود -An important feature of `mouseout` -- it triggers, when the pointer moves from an element to its descendant, e.g. from `#parent` to `#child` in this HTML: +یک ویژگی مهم `mouseout` این است که زمانی که از یک عنصر به فرزندان آن برویم، اتفاق می‌افتد. برای مثال در اچ‌تی‌ام‌ال زیر زمانی که از `#parent` به `#child` برویم: ```html
@@ -80,44 +80,44 @@ An important feature of `mouseout` -- it triggers, when the pointer moves from a
``` -If we're on `#parent` and then move the pointer deeper into `#child`, we get `mouseout` on `#parent`! +اگر روی `#parent` باشیم و سپس اشاره‌گر موس را داخل‌تر و داخل `#child` ببریم، رویداد `mouseout` روی `#parent` اتفاق می‌افتد. ![](mouseover-to-child.svg) -That may seem strange, but can be easily explained. +ممکن‌ است عجیب باشد، اما به سادگی شرح داده می‌شود. -**According to the browser logic, the mouse cursor may be only over a *single* element at any time -- the most nested one and top by z-index.** +**با توجه به منطق مرورگر، اشاره گر موس این امکان را دارد که فقط بالای *یک* عنصر در یک زمان واحد باشد. داخلی‌ترین و بالاترین به واسطه z-index.** -So if it goes to another element (even a descendant), then it leaves the previous one. +پس اگر داخل یک عنصر دیگر (حتی فرزند) شود، پس از قبلی بیرون می‌رود. -Please note another important detail of event processing. +به این نکته دیگر درباره جزئیات پردازش رویدادها دقت کنید. -The `mouseover` event on a descendant bubbles up. So, if `#parent` has `mouseover` handler, it triggers: +رویداد `mouseover` زمانی که روی یک فرزند اتفاق بیفتد، به اطلاح بالا می‌رود. به این معنی که اگر `parent` یک کنترل‌کننده برای رویداد `mouseover` داشته باشد، فراخوانی ‌می‌شود: ![](mouseover-bubble-nested.svg) ```online -You can see that very well in the example below: `
` is inside the `
`. There are `mouseover/out` handlers on `#parent` element that output event details. +در مثال زیر به خوبی می‌توانید ببینید: `
` داخل `
` قرار دارد. برای رویدادهای `mouseover/out` کنترل‌کننده‌هایی روی `#parent` تعریف شده که جزئیاتی درباره رویداد را در خروجی نمایش می‌دهد. -If you move the mouse from `#parent` to `#child`, you see two events on `#parent`: -1. `mouseout [target: parent]` (left the parent), then -2. `mouseover [target: child]` (came to the child, bubbled). +اگر اشاره‌گر موس را از روی `#parent` حرکت دهید و روی `#child` ببرید، دو رویداد را روی `#parent` خواهید دید: +1. `mouseout [target: parent]` (ترک پدر), سپس +2. `mouseover [target: child]` (ورود به فرزند, اصطلاحا بالا رفته). [codetabs height=360 src="mouseoverout-child"] ``` -As shown, when the pointer moves from `#parent` element to `#child`, two handlers trigger on the parent element: `mouseout` and `mouseover`: +همانطور که نشان داده‌شد، زمانی که اشاره‌گر موس از `#parent` بیرون و روی `#child` می‌رود، هر دو کنترل کننده پدر فراخوانده می‌شوند: `mouseout` و `mouseover`: ```js parent.onmouseout = function(event) { - /* event.target: parent element */ + /* event.target: عنصر پدر */ }; parent.onmouseover = function(event) { - /* event.target: child element (bubbled) */ + /* event.target: عنصر فرزند (اصطلاحا بالا رفته) */ }; ``` -**If we don't examine `event.target` inside the handlers, then it may seem that the mouse pointer left `#parent` element, and then immediately came back over it.** +**اگر که `event.target` را داخل کنترل‌کننده‌ها بررسی نکنیم، به نظر می‌رسد که موس `#parent` را ترک‌ کرده و سپس سریعا روی آن برگشته است.** But that's not the case! The pointer is still over the parent, it just moved deeper into the child element. From 94a43665aec0bd0c556daf9a239bfc384b668c25 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Sun, 12 Sep 2021 03:30:50 +0430 Subject: [PATCH 02/15] Update article.md --- .../article.md | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index a154dc348..7f7a64b12 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -119,28 +119,28 @@ parent.onmouseover = function(event) { **اگر که `event.target` را داخل کنترل‌کننده‌ها بررسی نکنیم، به نظر می‌رسد که موس `#parent` را ترک‌ کرده و سپس سریعا روی آن برگشته است.** -But that's not the case! The pointer is still over the parent, it just moved deeper into the child element. +اما این‌گونه نیست! اشاره‌گر موس هنوز روی عنصر پدر قراردارد، فقط وارد وارد عنصر فرزند که داخلی‌تر است شده. -If there are some actions upon leaving the parent element, e.g. an animation runs in `parent.onmouseout`, we usually don't want it when the pointer just goes deeper into `#parent`. +اگر زمان خروج از عنصر پدر قرار است، کاری انجام شود، برای مثال انیمیشنی در زمان `parent.onmouseout` اجرا شود، معمولا نمیخواهیم که زمانی که موس داخل عناصر داخلی‌تر `#parent` می‌شود، این کار انجام شود. -To avoid it, we can check `relatedTarget` in the handler and, if the mouse is still inside the element, then ignore such event. +برای جلوگیری از این رفتار، ما `relatedTarget` را در کنترل کننده چک می‌کنیم. اگر که اشاره‌گر موس هنوز داخل عنصر بود، پس صرفا رویداد را نادیده می‌گیریم. -Alternatively we can use other events: `mouseenter` and `mouseleave`, that we'll be covering now, as they don't have such problems. +می‌توانیم از دو رویداد دیگر نیز استفاده کنیم: `mouseenter` و `mouseleave`، که اکنون به آنها می‌پردازیم،‌ چنین مشکلاتی را باعث نمی‌شوند. -## Events mouseenter and mouseleave +## رویدادهای mouseenter و mouseleave -Events `mouseenter/mouseleave` are like `mouseover/mouseout`. They trigger when the mouse pointer enters/leaves the element. +رویدادهای `mouseenter/mouseleave` مشابه `mouseover/mouseout` هستند. زمانی اتفاق می‌افتند که اشاره‌گر وارد یک عنصر، یا از آن خارج می‌شود. -But there are two important differences: +اما دو تفاوت اساسی وجود دارد: -1. Transitions inside the element, to/from descendants, are not counted. -2. Events `mouseenter/mouseleave` do not bubble. +1. گذرهای داخل عنصر، از\به فرزندها در نظر گرفته ‌نمی‌شوند. +2. رویداد‌های `mouseenter/mouseleave` به اصطلاح بالا نمی‌روند. -These events are extremely simple. +این رویدادها بسیار ساده هستند. -When the pointer enters an element -- `mouseenter` triggers. The exact location of the pointer inside the element or its descendants doesn't matter. +زمانی که اشاره‌گر موش وارد یک عنصر شود، ‍`mouseenter` اتفاق می‌افتد. محل دقیق اشاره‌گر داخل عنصر یا فرزندهای آن مهم نیست. -When the pointer leaves an element -- `mouseleave` triggers. +زمانی که اشاره‌گر از یک عنصر خارج شود، `mouseleave` اتفاق می‌افتد. ```online This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`. From dae35a319e501612b8766d68b68a9d1e2b760194 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Sun, 12 Sep 2021 15:54:17 +0430 Subject: [PATCH 03/15] finished article.md --- .../article.md | 60 +++++++++---------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md index 7f7a64b12..7e5f41582 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md @@ -8,7 +8,7 @@ ![](mouseover-mouseout.svg) -این‌ها رویدادهای خاصی هستند، زیرا یک خاصیت به نام `relatedTarget` دارند. این خاصیت به نوعی متمم `target` خواهد بود. زمانی که اشاره‌گر موس یک عنصر را با ورودی به عنصر دیگر ترک می‌کند، یکی از آن‌ها `target`، و دیگری `relatedTarget` خواهد بود. +این‌ها رویدادهای خاصی هستند، زیرا یک خاصیت به نام `relatedTarget` دارند. این خاصیت به نوعی مکمل `target` خواهد بود. زمانی که اشاره‌گر موس یک عنصر را با ورودی به عنصر دیگر ترک می‌کند، یکی از آن‌ها `target`، و دیگری `relatedTarget` خواهد بود. برای `mouseover`: @@ -143,29 +143,29 @@ parent.onmouseover = function(event) { زمانی که اشاره‌گر از یک عنصر خارج شود، `mouseleave` اتفاق می‌افتد. ```online -This example is similar to the one above, but now the top element has `mouseenter/mouseleave` instead of `mouseover/mouseout`. +این مثال شبیه بالایی است، اما عنصر پدر به رویدادهای `mouseenter/mouseleave` به جای `mouseover/mouseout` گوش می‌دهد. -As you can see, the only generated events are the ones related to moving the pointer in and out of the top element. Nothing happens when the pointer goes to the child and back. Transitions between descendants are ignored +همانطور که می‌بینید، تنها رویدادهایی که ایجاد می‌شوند،‌آنهایی هستند که به واسطه ورود و خروج اشاره‌گر موس از عنصر پدر اتفاق می‌افتند. زمانی که اشاره‌گر موس وارد عنصر فرزند و از آن خارج می‌شود اتفاقی نمی‌افتد. گذرهایی بین فرزندها اتفاق می‌افتد نادیده گرفته می‌شوند. [codetabs height=340 src="mouseleave"] ``` -## Event delegation +## واگذاری رویداد -Events `mouseenter/leave` are very simple and easy to use. But they do not bubble. So we can't use event delegation with them. +رویدادهای `mouseenter/leave` بسیار ساده و برای استفاده ساده هستند. اما بالا نمی‌روند. پس نمی‌تواتیم برای آنها از واگذاری رویدادها استفاده کنیم. -Imagine we want to handle mouse enter/leave for table cells. And there are hundreds of cells. +تصور کنید که می‌خواهیم ورود/خروج اشاره‌گر موس برای سلول‌های جدول کنترل کنیم. و صدها سلول وجود دارد. -The natural solution would be -- to set the handler on `` and process events there. But `mouseenter/leave` don't bubble. So if such event happens on `
`, then only a handler on that `` is able to catch it. +طبیعتا راه حلی که ابتدا به ذهن می‌رسد این است که کنترل‌کننده را روی `` تنظیم کنیم و رویدادها را درون آن پردازش کنیم. اما رویدادهای `mouseenter/leave` بالا نمی‌روند. پس اگر چنین رویدادی روی `
` اتفاق بیفتد، فقط کنترل‌کننده‌ای که روی آن `` می‌تواند متوجه این رویداد شود. -Handlers for `mouseenter/leave` on `` only trigger when the pointer enters/leaves the table as a whole. It's impossible to get any information about transitions inside it. +کنترل‌کننده‌هایی که برای `mouseenter/leave` روی `
` وجود دارند، تنها زمانی صدا زده‌ ‌می‌شوند که اشاره‌گر موس وارد/خارج جدول کلی شود. در این صورت گرفتن اطلاعات درباره گذرهایی که درون خود جدول اتفاق می‌افتد غیر ممکن خواهد بود. -So, let's use `mouseover/mouseout`. +پس، از `mouseover/mouseout` استفاده می‌کنیم. -Let's start with simple handlers that highlight the element under mouse: +با یک کنترل‌کننده ساده که تنها عنصر زیر اشاره‌گر موس را مشخص می‌کند شروع کنیم: ```js -// let's highlight an element under the pointer +// مشخص کردن عنصر زیر اشاره‌گر موس table.onmouseover = function(event) { let target = event.target; target.style.background = 'pink'; @@ -178,44 +178,44 @@ table.onmouseout = function(event) { ``` ```online -Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted: +در اینجا می‌توانید چیزی که اتفاق می‌افتد را ببینید. با حرکت اشاره‌گر موس روی عناصر این جدول، عنصر کنونی که زیر اشاره‌گر موس است مشخص می‌شود: [codetabs height=480 src="mouseenter-mouseleave-delegation"] ``` -In our case we'd like to handle transitions between table cells `
`: entering a cell and leaving it. Other transitions, such as inside the cell or outside of any cells, don't interest us. Let's filter them out. +در این حالت ما می‌خواستیم که گذرهایی که بین سلول‌های جدول `` اتفاق می‌افتد را کنترل کنیم: ورود به یک سلول جدول و خروج از آن. بقیه‌ی گذرها، مانند درون یک سلول، یا خارج هر سلول، به ما کمکی نمی‌کند. پس بیایید آنها را پالایش کنیم. -Here's what we can do: +کاری که می‌توانیم انجام دهیم این است: -- Remember the currently highlighted `` in a variable, let's call it `currentElem`. -- On `mouseover` -- ignore the event if we're still inside the current ``. -- On `mouseout` -- ignore if we didn't leave the current ``. +- عنصر کنونی مشخص شده `` را درون یک متغیر ذخیره کنیم. آنرا `currentElem` می‌نامیم. +- در هنگام `mouseover`، رویداد را در صورتی که هنوز داخل عنصر `` کنونی باشیم، نادیده می‌گیریم. +- در هنگام `mouseout`، رویداد را در صورتی که عنصر `` کنونی را ترک نکرده باشیم، نادیده می‌گیریم. -Here's an example of code that accounts for all possible situations: +این مثال تمام حالاتی که ممکن است اتفاق بیفتند حساب کرده است: [js src="mouseenter-mouseleave-delegation-2/script.js"] -Once again, the important features are: -1. It uses event delegation to handle entering/leaving of any `` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation. -2. Extra events, such as moving between descendants of `` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters `` as a whole. +بار دیگر، ویژگی‌های مهم عبارت‌اند از: +1. برای کنترل ورود/خروج اشاره‌گر موس از هر `` درون جدول، از واگذاری رویداد استفاده می‌شود. پس از `mouseover/out` بجای `mouseenter/leave` برای این منظور استفاده می‌شود. +2. رویدادهای اضافی، مانند حرکت موس بین فرزندهای خود `` پالایش شده‌اند، به طوری که `onEnter/Leave` تنها زمانی اجرا می‌شوند که اشاره‌گر موس وارد/خارج کل `` شود. ```online -Here's the full example with all details: +در اینجا مثال کاملی همراه با تمام جزئیات آمده است: [codetabs height=460 src="mouseenter-mouseleave-delegation-2"] -Try to move the cursor in and out of table cells and inside them. Fast or slow -- doesn't matter. Only `` as a whole is highlighted, unlike the example before. +اشاره‌گر موس را رو و بیرون سلول‌های جدول ببرید. سریع یا آسان، اهمیتی ندارد. کل `` مشخص خواهد شد، برخلاف مثالی که قبلا دیده بودیم. ``` -## Summary +## خلاصه -We covered events `mouseover`, `mouseout`, `mousemove`, `mouseenter` and `mouseleave`. +ما درباره رویدادهای `mouseover`، `mouseout`، `mousemove`، `mouseenter` و `mouseleave` صحبت کردیم. -These things are good to note: +توجه به این نکات خوب است که: -- A fast mouse move may skip intermediate elements. -- Events `mouseover/out` and `mouseenter/leave` have an additional property: `relatedTarget`. That's the element that we are coming from/to, complementary to `target`. +- یک حرکت سریع موس ممکن است باعث پرش از روی عناصر بین حرکت شود. +- رویدادهای `mouseover/out` و `mouseenter/leave` یک خاصیت اضافی دارند: `relatedTarget`. که عنصری خواهد بود که وارد/خارج آن می‌شویم، و به نوعی مکمل `target` است. -Events `mouseover/out` trigger even when we go from the parent element to a child element. The browser assumes that the mouse can be only over one element at one time -- the deepest one. +رویدادهای `mouseover/out` زمانی که ما از عنصر پدر به فرزند برویم هم اتفاق می‌افتند. مرورگر فرض می‌کند که اشاره‌گر موس در یک زمان فقط می‌تواند روی یک عنصر باشد، داخلی‌ترین عنصر. -Events `mouseenter/leave` are different in that aspect: they only trigger when the mouse comes in and out the element as a whole. Also they do not bubble. +اما رویدادهای `mouseenter/leave‍` از این نظر متفاوت عمل می‌کنند: آنها فقط زمانی اتفاق می‌افتند که اشاره‌گر موس وارد یا یک عنصر به عنوان یک کل خارج شود. همچنین آنها اصطلاحا، بالا نمی‌روند. From 0bf3264ed943912c7daa7427093446f1b2e589b0 Mon Sep 17 00:00:00 2001 From: Erfan Yeganegi Date: Sun, 12 Sep 2021 16:21:53 +0430 Subject: [PATCH 04/15] behavior-nested-tooltip --- .../solution.view/index.html | 38 +++++++++---------- .../source.view/index.html | 18 ++++----- .../1-behavior-nested-tooltip/task.md | 18 ++++----- 3 files changed, 37 insertions(+), 37 deletions(-) diff --git a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html index e998165fd..671bf6efd 100644 --- a/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html +++ b/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html @@ -6,7 +6,7 @@