diff options
Diffstat (limited to 'files/ar/web/css/pointer-events/index.html')
| -rw-r--r-- | files/ar/web/css/pointer-events/index.html | 148 |
1 files changed, 148 insertions, 0 deletions
diff --git a/files/ar/web/css/pointer-events/index.html b/files/ar/web/css/pointer-events/index.html new file mode 100644 index 0000000000..7974b501d6 --- /dev/null +++ b/files/ar/web/css/pointer-events/index.html @@ -0,0 +1,148 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +translation_of: Web/CSS/pointer-events +--- +<div><font><font>{{CSSRef}}</font></font></div> + +<p><font><font>و </font><a href="/en-US/docs/Web/CSS"><font>CSS</font></a><font> مجموعات الممتلكات تحت أي ظرف من الظروف (إن وجدت) لعنصر رسومي معين يمكن أن تصبح </font><a href="/en-US/docs/Web/API/Event/target"><font>الهدف</font></a><font> من الأحداث المؤشر.</font></font><strong> <code>pointer-events</code></strong></p> + +<div>{{EmbedInteractiveExample("pages/css/pointer-events.html")}}</div> + + +<p class="hidden"><font><font>يتم تخزين مصدر هذا المثال التفاعلي في مستودع GitHub. </font><font>إذا كنت ترغب في المساهمة في مشروع الأمثلة التفاعلية ، فيرجى استنساخ </font></font><a href="https://github.com/mdn/interactive-examples"><font><font>https://github.com/mdn/interactive-exexs</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></p> + +<p><font><font>عندما تكون هذه الخاصية غير محددة ، </font></font><code>visiblePainted</code><font><font>تنطبق </font><font>نفس خصائص </font><font>القيمة على محتوى SVG.</font></font></p> + +<p><font><font>بالإضافة إلى الإشارة إلى أن العنصر ليس هدفًا لأحداث المؤشر ، </font></font><code>none</code><font><font>ترشد </font><font>القيمة </font><font>حدث المؤشر إلى "استعراض" العنصر والهدف مهما كان "أسفل" هذا العنصر بدلاً من ذلك.</font></font></p> + +<h2 id="بناء_الجملة"><font><font>بناء الجملة</font></font></h2> + +<pre class="brush: css no-line-numbers"><font><font>/ * قيم الكلمات الرئيسية * /</font></font><font><font> +أحداث مؤشر: السيارات.</font></font><font><font> +أحداث المؤشر: لا شيء ؛</font></font><font><font> +أحداث المؤشر: visualPainted؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: visualFill؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: visualStroke؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث مؤشر: مرئية. </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: رسمت. </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: ملء ؛ </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث مؤشر: السكتة الدماغية. </font><font>/ * SVG فقط * /</font></font><font><font> +أحداث المؤشر: جميع ؛ </font><font>/ * SVG فقط * /</font></font> +<font><font> +/ * القيم العالمية * /</font></font><font><font> +أحداث المؤشر: ترث.</font></font><font><font> +أحداث المؤشر: الأولي ؛</font></font><font><font> +أحداث المؤشر: unset؛</font></font> +</pre> + +<p><font><font>و </font></font><code>pointer-events</code><font><font>يتم تحديد الممتلكات، كلمة رئيسية واحدة اختياره من قائمة القيم أدناه.</font></font></p> + +<h3 id="القيم"><font><font>القيم</font></font></h3> + +<dl> + <dt><code>auto</code></dt> + <dd><font><font>يتصرف العنصر كما لو </font></font><code>pointer-events</code><font><font>لم يتم تحديد الخاصية. </font><font>في محتوى SVG ، يكون لهذه القيمة والقيمة </font></font><code>visiblePainted</code><font><font>نفس التأثير.</font></font></dd> + <dt><code>none</code></dt> + <dd><font><font>العنصر ليس </font></font><a href="/en-US/docs/Web/API/Event/target"><font><font>هدفًا</font></font></a><font><font> لأحداث المؤشر ؛ </font><font>ومع ذلك ، قد تستهدف أحداث المؤشر عناصره التنازلي إذا كانت تلك النزول قد عيّنت </font></font><code>pointer-events</code><font><font>بعض القيمة الأخرى. </font><font>في هذه الظروف ، ستؤدي أحداث المؤشر إلى تشغيل مستمعي الأحداث على هذا العنصر الرئيسي كما هو مناسب في طريقهم إلى / من السليل أثناء </font><font>مراحل </font><font>التقاط / </font></font><a href="/en-US/docs/Web/API/Event/bubbles"><font><font>فقاعة</font></font></a><font><font> الحدث </font><font>.</font></font></dd> +</dl> + +<h4 id="SVG_فقط"><font><font>SVG فقط</font></font></h4> + +<dl> + <dt><code>visiblePainted</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند </font></font><code>visibility</code><font><font>تعيين الخاصية على </font></font><code>visible</code><font><font>سبيل المثال عندما يكون مؤشر الماوس فوق الجزء الداخلي (أي ، "تعبئة") للعنصر وتعيين </font></font><code>fill</code><font><font>الخاصية على قيمة أخرى بخلاف </font></font><code>none</code><font><font>، أو عندما مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر </font></font><code>stroke</code><font><font>ويتم ضبط الخاصية على قيمة أخرى غير </font></font><code>none</code><font><font>.</font></font></dd> + <dt><code>visibleFill</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما </font></font><code>visibility</code><font><font>يتم تعيين الخاصية إلى </font></font><code>visible</code><font><font>وعندما على سبيل المثال ، يكون مؤشر الماوس فوق الجزء الداخلي (أي ، تعبئة) العنصر. </font></font><code>fill</code><font><font>لا تؤثر </font><font>قيمة </font><font>الخاصية على معالجة الحدث.</font></font></dd> + <dt><code>visibleStroke</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند </font></font><code>visibility</code><font><font>تعيين الخاصية على </font></font><code>visible</code><font><font>سبيل المثال عندما يكون مؤشر الماوس فوق محيط العنصر (أي الحد). </font></font><code>stroke</code><font><font>لا تؤثر </font><font>قيمة </font><font>الخاصية على معالجة الحدث.</font></font></dd> + <dt><code>visible</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر عند </font></font><code>visibility</code><font><font>تعيين الخاصية على </font></font><code>visible</code><font><font>سبيل المثال ، يكون مؤشر الماوس على الجانب الداخلي (أي ، الحشو) أو المحيط (أي الحد) للعنصر. </font><font>قيم </font></font><code>fill</code><font><font>و </font></font><code>stroke</code><font><font>لا تؤثر على معالجة الحدث.</font></font></dd> + <dt><code>painted</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو الهدف لحدث المؤشر فقط عندما يكون مؤشر الماوس فوق المنطقة الداخلية (على سبيل المثال ، "تعبئة") </font></font><code>fill</code><font><font>ويتم ضبط الخاصية على قيمة أخرى بخلاف </font></font><code>none</code><font><font>أو عندما يكون مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر </font></font><code>stroke</code><font><font>والممتلكات يتم تعيينها على قيمة غير </font></font><code>none</code><font><font>. </font></font><code>visibility</code><font><font>لا تؤثر </font><font>قيمة </font><font>الخاصية على معالجة الحدث.</font></font></dd> + <dt><code>fill</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، تعبئة) العنصر. </font><font>قيم </font></font><code>fill</code><font><font>و </font></font><code>visibility</code><font><font>خصائص لا تؤثر معالجة الحدث.</font></font></dd> + <dt><code>stroke</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق محيط العنصر (أي الحد). </font><font>قيم </font></font><code>stroke</code><font><font>و </font></font><code>visibility</code><font><font>خصائص لا تؤثر معالجة الحدث.</font></font></dd> + <dt><code>all</code></dt> + <dd><font><font>SVG فقط. </font><font>يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، التعبئة) أو المحيط (أي الحد) للعنصر. </font><font>قيم </font></font><code>fill</code><font><font>، </font></font><code>stroke</code><font><font>و </font></font><code>visibility</code><font><font>خصائص لا تؤثر معالجة الحدث.</font></font></dd> +</dl> + +<h3 id="بناء_الجملة_الرسمي"><font><font>بناء الجملة الرسمي</font></font></h3> + +<pre class="syntaxbox"><font><font>{{csssyntax}}</font></font></pre> + +<h2 id="أمثلة"><font><font>أمثلة</font></font></h2> + +<h3 id="مثال_أساسي"><font><font>مثال أساسي</font></font></h3> + +<p><font><font>يعطل هذا المثال أحداث المؤشر (النقر والسحب والتحويم وما إلى ذلك) على جميع الصور.</font></font></p> + +<pre class="brush:css"><font><font>img</font></font><font><font> + أحداث المؤشر: لا شيء ؛</font></font><font><font> +}</font></font></pre> + +<h3 id="تعطيل_الروابط"><font><font>تعطيل الروابط</font></font></h3> + +<p><font><font>يعطل هذا المثال أحداث المؤشر على الرابط إلى http://example.com.</font></font></p> + +<pre class="brush:html"><font><font><UL></font></font><font><font> + <li> <a href="https://developer.mozilla.org"> MDN </a> </li></font></font><font><font> + <li> <a href="http://example.com"> example.com </a> </li></font></font><font><font> +</ UL></font></font></pre> + +<pre class="brush:css"><font><font>a [href = "http://example.com"] {</font></font><font><font> + أحداث المؤشر: لا شيء ؛</font></font><font><font> +}</font></font></pre> + +<div>{{EmbedLiveSample("Disabling_links", "500", "100")}}</div> + +<h2 id="ملاحظات"><font><font>ملاحظات</font></font></h2> + +<p><font><font>لاحظ أن منع عنصر من كونها هدفا للأحداث المؤشر باستخدام </font></font><code>pointer-events</code><font><font>لا </font></font><em><font><font>لا</font></font></em><font><font> يعني بالضرورة أن المستمعين الحدث المؤشر على هذا العنصر </font></font><em><font><font>لا يمكن</font></font></em><font><font> أو </font></font><em><font><font>لا</font></font></em><font><font> يمكن تشغيلها. </font><font>إذا كان أحد أطفال العنصر قد </font></font><code>pointer-events</code><font><font>حدد صراحة </font></font><em><font><font>للسماح</font></font></em><font><font> لهذا الطفل بأن يكون هدفًا لأحداث المؤشر ، فإن أي أحداث تستهدف هذا الطفل تمر عبر الوالد أثناء انتقال الحدث على طول سلسلة الوالدين ، وتحفيز مستمعي الحدث على الوالد كما هو مناسب. . </font><font>بالطبع لن يتم القبض على أي نشاط مؤشر في نقطة على الشاشة يغطيه الوالد ولكن ليس من قِبل الطفل من قِبل الطفل أو الوالد (سوف يمر "الوالد" ويستهدف كل ما هو تحتها).</font></font></p> + +<p><code>pointer-events: none</code><font><font>ستظل </font><font>العناصر التي تحتوي </font><font>على التركيز من خلال التنقل المتسلسل للوحة المفاتيح باستخدام </font></font><kbd>Tab</kbd><font><font>المفتاح.</font></font></p> + +<p><font><font>نود أن نوفر تحكمًا محببًا دقيقًا (أكثر من مجرد </font></font><code>auto</code><font><font>و </font></font><code>none</code><font><font>) في HTML لأي أجزاء من العنصر ستؤدي إلى "التقاط" أحداث المؤشر ومتى. </font><font>لمساعدتنا في تحديد الكيفية التي </font></font><code>pointer-events</code><font><font>ينبغي بها تمديد HTML ، إذا كان لديك أي أشياء معينة ترغب في القيام بها مع هذه الخاصية ، يرجى إضافتها إلى قسم حالات الاستخدام في </font></font><a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events"><font><font>صفحة الويكي هذه</font></font></a><font><font> (لا تقلق حول ابقائها مرتبة).</font></font></p> + +<h2 id="مواصفات"><font><font>مواصفات</font></font></h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col"><font><font>تخصيص</font></font></th> + <th scope="col"><font><font>الحالة</font></font></th> + <th scope="col"><font><font>تعليق</font></font></th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td><font><font>{{Spec2 ( 'SVG2')}}</font></font></td> + <td></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td> + <td><font><font>{{Spec2 ( 'SVG1.1')}}</font></font></td> + <td><font><font>التعريف الأولي</font></font></td> + </tr> + </tbody> +</table> + +<p><font><font>{{cssinfo}}</font></font></p> + +<p><font><font>امتداده إلى عناصر HTML ، على الرغم من وجوده في المسودات المبكرة من CSS Basic User Interface Module المستوى 3 ، فقد تم دفعه إلى </font></font><a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events"><font><font>المستوى 4</font></font></a><font><font> .</font></font></p> + +<h2 id="Browser_compatibility" name="Browser_compatibility"><font><font>التوافق المتصفح</font></font></h2> + +<div class="hidden"><font><font>يتم إنشاء جدول التوافق في هذه الصفحة من البيانات المنظمة. </font><font>إذا كنت ترغب في المساهمة في البيانات ، فيرجى مراجعة </font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font> وإرسال طلب سحب إلينا.</font></font></div> + +<p>{{Compat("css.properties.pointer-events")}}</p> + +<h2 id="أنظر_أيضا"><font><font>أنظر أيضا</font></font></h2> + +<ul> + <li><font><font>سمة SVG {{SVGAttr ("pointer-events")}}</font></font></li> + <li><font><font>سمة SVG {{SVGAttr ("visibility")}}</font></font></li> + <li><font><font>توسيع </font><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html"><font>WebKit Specs PointerEventsProperty</font></a><font> للاستخدام في محتوى HTML (X)</font></font></li> +</ul> |