pointer-events

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

عندما تكون هذه الخاصية غير محددة ، 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خصائص لا تؤثر معالجة الحدث.

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

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

أمثلة

مثال أساسي

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

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"] {
  أحداث المؤشر: لا شيء ؛
}

ملاحظات

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

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

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

مواصفات

تخصيص الحالة تعليق
Scalable Vector Graphics (SVG) 2
The definition of 'pointer-events' in that specification.
Candidate Recommendation
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
The definition of 'pointer-events' in that specification.
Recommendation التعريف الأولي

Initial valueauto
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
pointer-eventsChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 11Opera Full support 9Safari Full support 4WebView Android Full support 2Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.2Samsung Internet Android ?
Applies to HTML elements
Experimental
Chrome Full support 2Edge Full support 12Firefox Full support 3.6IE Full support 11Opera Full support 15Safari Full support 4WebView Android Full support 37Chrome Android Full support 18Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 3.2Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

أنظر أيضا