--- title: pointer-events slug: Web/CSS/pointer-events translation_of: Web/CSS/pointer-events ---
{{CSSRef}}

و CSS مجموعات الممتلكات تحت أي ظرف من الظروف (إن وجدت) لعنصر رسومي معين يمكن أن تصبح الهدف من الأحداث المؤشر. pointer-events

{{EmbedInteractiveExample("pages/css/pointer-events.html")}}

عندما تكون هذه الخاصية غير محددة ، visiblePaintedتنطبق نفس خصائص القيمة على محتوى SVG.

بالإضافة إلى الإشارة إلى أن العنصر ليس هدفًا لأحداث المؤشر ، noneترشد القيمة حدث المؤشر إلى "استعراض" العنصر والهدف مهما كان "أسفل" هذا العنصر بدلاً من ذلك.

بناء الجملة

/ * قيم الكلمات الرئيسية * /
أحداث مؤشر: السيارات.
أحداث المؤشر: لا شيء ؛
أحداث المؤشر: visualPainted؛ / * SVG فقط * /
أحداث المؤشر: visualFill؛ / * SVG فقط * /
أحداث المؤشر: visualStroke؛ / * SVG فقط * /
أحداث مؤشر: مرئية. / * SVG فقط * /
أحداث المؤشر: رسمت. / * SVG فقط * /
أحداث المؤشر: ملء ؛ / * SVG فقط * /
أحداث مؤشر: السكتة الدماغية. / * SVG فقط * /
أحداث المؤشر: جميع ؛ / * SVG فقط * /

/ * القيم العالمية * /
أحداث المؤشر: ترث.
أحداث المؤشر: الأولي ؛
أحداث المؤشر: unset؛

و pointer-eventsيتم تحديد الممتلكات، كلمة رئيسية واحدة اختياره من قائمة القيم أدناه.

القيم

auto
يتصرف العنصر كما لو pointer-eventsلم يتم تحديد الخاصية. في محتوى SVG ، يكون لهذه القيمة والقيمة visiblePaintedنفس التأثير.
none
العنصر ليس هدفًا لأحداث المؤشر ؛ ومع ذلك ، قد تستهدف أحداث المؤشر عناصره التنازلي إذا كانت تلك النزول قد عيّنت pointer-eventsبعض القيمة الأخرى. في هذه الظروف ، ستؤدي أحداث المؤشر إلى تشغيل مستمعي الأحداث على هذا العنصر الرئيسي كما هو مناسب في طريقهم إلى / من السليل أثناء مراحل التقاط / فقاعة الحدث .

SVG فقط

visiblePainted
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند visibilityتعيين الخاصية على visibleسبيل المثال عندما يكون مؤشر الماوس فوق الجزء الداخلي (أي ، "تعبئة") للعنصر وتعيين fillالخاصية على قيمة أخرى بخلاف none، أو عندما مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر strokeويتم ضبط الخاصية على قيمة أخرى غير none.
visibleFill
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما visibilityيتم تعيين الخاصية إلى visibleوعندما على سبيل المثال ، يكون مؤشر الماوس فوق الجزء الداخلي (أي ، تعبئة) العنصر. fillلا تؤثر قيمة الخاصية على معالجة الحدث.
visibleStroke
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عند visibilityتعيين الخاصية على visibleسبيل المثال عندما يكون مؤشر الماوس فوق محيط العنصر (أي الحد). strokeلا تؤثر قيمة الخاصية على معالجة الحدث.
visible
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر عند visibilityتعيين الخاصية على visibleسبيل المثال ، يكون مؤشر الماوس على الجانب الداخلي (أي ، الحشو) أو المحيط (أي الحد) للعنصر. قيم fillو strokeلا تؤثر على معالجة الحدث.
painted
SVG فقط. يمكن أن يكون العنصر هو الهدف لحدث المؤشر فقط عندما يكون مؤشر الماوس فوق المنطقة الداخلية (على سبيل المثال ، "تعبئة") fillويتم ضبط الخاصية على قيمة أخرى بخلاف noneأو عندما يكون مؤشر الماوس فوق المحيط (أي ، "حد") للعنصر strokeوالممتلكات يتم تعيينها على قيمة غير none. visibilityلا تؤثر قيمة الخاصية على معالجة الحدث.
fill
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، تعبئة) العنصر. قيم fillو visibilityخصائص لا تؤثر معالجة الحدث.
stroke
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق محيط العنصر (أي الحد). قيم strokeو visibilityخصائص لا تؤثر معالجة الحدث.
all
SVG فقط. يمكن أن يكون العنصر هو هدف حدث المؤشر فقط عندما يكون المؤشر فوق الجزء الداخلي (أي ، التعبئة) أو المحيط (أي الحد) للعنصر. قيم fill، strokeو visibilityخصائص لا تؤثر معالجة الحدث.

بناء الجملة الرسمي

{{csssyntax}}

أمثلة

مثال أساسي

يعطل هذا المثال أحداث المؤشر (النقر والسحب والتحويم وما إلى ذلك) على جميع الصور.

img
  أحداث المؤشر: لا شيء ؛
}

تعطيل الروابط

يعطل هذا المثال أحداث المؤشر على الرابط إلى http://example.com.

<UL>
  <li> <a href="https://developer.mozilla.org"> MDN </a> </li>
  <li> <a href="http://example.com"> example.com </a> </li>
</ UL>
a [href = "http://example.com"] {
  أحداث المؤشر: لا شيء ؛
}
{{EmbedLiveSample("Disabling_links", "500", "100")}}

ملاحظات

لاحظ أن منع عنصر من كونها هدفا للأحداث المؤشر باستخدام pointer-eventsلا لا يعني بالضرورة أن المستمعين الحدث المؤشر على هذا العنصر لا يمكن أو لا يمكن تشغيلها. إذا كان أحد أطفال العنصر قد pointer-eventsحدد صراحة للسماح لهذا الطفل بأن يكون هدفًا لأحداث المؤشر ، فإن أي أحداث تستهدف هذا الطفل تمر عبر الوالد أثناء انتقال الحدث على طول سلسلة الوالدين ، وتحفيز مستمعي الحدث على الوالد كما هو مناسب. . بالطبع لن يتم القبض على أي نشاط مؤشر في نقطة على الشاشة يغطيه الوالد ولكن ليس من قِبل الطفل من قِبل الطفل أو الوالد (سوف يمر "الوالد" ويستهدف كل ما هو تحتها).

pointer-events: noneستظل العناصر التي تحتوي على التركيز من خلال التنقل المتسلسل للوحة المفاتيح باستخدام Tabالمفتاح.

نود أن نوفر تحكمًا محببًا دقيقًا (أكثر من مجرد autoو none) في HTML لأي أجزاء من العنصر ستؤدي إلى "التقاط" أحداث المؤشر ومتى. لمساعدتنا في تحديد الكيفية التي pointer-eventsينبغي بها تمديد HTML ، إذا كان لديك أي أشياء معينة ترغب في القيام بها مع هذه الخاصية ، يرجى إضافتها إلى قسم حالات الاستخدام في صفحة الويكي هذه (لا تقلق حول ابقائها مرتبة).

مواصفات

تخصيص الحالة تعليق
{{SpecName('SVG2', 'interact.html#PointerEventsProperty', 'pointer-events')}} {{Spec2 ( 'SVG2')}}
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}} {{Spec2 ( 'SVG1.1')}} التعريف الأولي

{{cssinfo}}

امتداده إلى عناصر HTML ، على الرغم من وجوده في المسودات المبكرة من CSS Basic User Interface Module المستوى 3 ، فقد تم دفعه إلى المستوى 4 .

التوافق المتصفح

{{Compat("css.properties.pointer-events")}}

أنظر أيضا