Css pointer events jquery

CSS pointer-events Property

Set whether or not an element should react to pointer events:

div.ex2 pointer-events: auto;
>

Definition and Usage

The pointer-events property defines whether or not an element reacts to pointer events.

Default value:	auto
Inherited:	yes
Animatable:	No. Read about animatable
Version:	CSS3
JavaScript syntax:	object.style.pointerEvents=»none» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

Property Value	Description
auto	The element reacts to pointer events, like :hover and click. This is default
none	The element does not react to pointer events
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

jQuery Css pointer-events hover issue

The following tutorial shows you how to do «jQuery Css pointer-events hover issue».

The result is illustrated in the iframe.

You can check the full source code and open it in another tab using the links.

Javascript Source Code

The Javascript source code to do «jQuery Css pointer-events hover issue» is

jQuery('.playlist-non-selected').on('mouseenter', overPlaylistItem).on('mouseleave', outPlaylistItem); function overPlaylistItem(e) < var currentTarget = $(e.currentTarget); currentTarget.removeClass('playlist-non-selected').addClass('playlist-selected'); > function outPlaylistItem(e) < var currentTarget = $(e.currentTarget); currentTarget.removeClass('playlist-selected').addClass('playlist-non-selected'); >

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js">  style id="compiled-css" type="text/css"> .playlist-item !-- w ww .d e m o 2 s . co m--> position: relative; top: 0px; left: 0px; height: 40px; margin-bottom: 5px; overflow: hidden; line-height: 40px; > .playlist-title < position: relative; top: 0px; margin-left: 20px; overflow: hidden; font-size: 22px; font-family: 'Gnuolane Free'; margin-bottom: 0px; > .playlist-selected < color: #fff; > .playlist-selected span < pointer-events: none; >.playlist-non-selected < color: #bbb; >  body> div >"playlist-item"> a >"playlist-non-selected" href="#"> div >"playlist-title">AudioAgent - Japanese Intro   script type='text/javascript'> jQuery('.playlist-non-selected').on('mouseenter', overPlaylistItem).on('mouseleave', outPlaylistItem); function overPlaylistItem(e) < var currentTarget = $(e.currentTarget); currentTarget.removeClass('playlist-non-selected').addClass('playlist-selected'); > function outPlaylistItem(e) < var currentTarget = $(e.currentTarget); currentTarget.removeClass('playlist-selected').addClass('playlist-non-selected'); >   

Related

• jQuery CSS Making a div change opacity, lightness when hovered over
• jQuery CSS On hover change another element
• jQuery CSS only loads on mouse hover, why
• jQuery Css pointer-events hover issue
• jQuery Css pointer-events hover issue (Demo 2)
• jQuery CSS position and opacity styles interfering with hover and click events
• jQuery CSS: Reduce element size on hover, but keep original «hover area»

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Tiny, maintained CSS pointer-events polyfill

License

screeny05/jquery.pointer-events-polyfill

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

jQuery CSS Pointer-Events Polyfill

This piece of javascript is a tiny Polyfill which adds support for the css-property pointer-events: none|all; for browsers not supporting it.

The size of the minified script is ~1000 bytes (roughly 500 bytes gzipped).

This Polyfill depends on jQuery @ ~1.9 .

Include jquery.pointer-events-polyfill.js in your document, and call the polyfill like this:

$(function() window.pointerEventsPolyfill(); >);

Now your page supports pointer-events !

If you want to remove the polyfill again, sometime later, use it like this:

$(function() var polyfill = window.pointerEventsPolyfill(); // . stuff polyfill.destroy(); >);

The polyfill doesn’t catch events

Imagine you have two elements overlapping like this:

You want the purple element to not be clickable, so you add pointer-events:none to it.

Now you add click-listeners to both elements. When the intersecting area gets clicked, the first event to be thrown will be that of the purple element, the second one will be the green-ish one.

The purple element’s event will be thrown!

Synchronous callbacks might hide events temporarily

The Polyfill hides the elements synchronous to check whether the underlying elements have been clicked, so you’re better of not blocking the event-loop, when listening on the subscribed events in order to not have invisible elements.

div style pl-s">pointer-events: none;" class pl-s">non-clickable"> div style pl-s">pointer-events: all;" class pl-s">clickable">div> div> script> window.pointerEventsPolyfill(); $('.clickable').click(function() // bad - alert blocks the event-loop, so .non-clickable // will be invisible while the alert is open alert('clicked'); // better setTimeout(function() alert('clicked'); >); >); script>

You can call window.pointerEventsPolyfill with a couple of possibly useful options, namely:

• selector (jQuery-selector, default: ‘*’ ) — indicates which elements the polyfill should apply to.
• listenOn (Array, default: [‘click’, ‘dblclick’, ‘mousedown’, ‘mouseup’] ) — the events this plugin listens to. Excludes mouseover-events for performance, but you can add them yourself.
• forcePolyfill (Bool, default: false ) — disregard the browsers support of pointer-events and force the polyfill to be added.
• pointerEventsNoneClass (String|null, default: null ) — when truthy, add the polyfill to elements with this class, even when the elements css doesn’t have the pointer-events -property set.
• pointerEventsAllClass (String|null, default: null ) — when truthy, this element acts as pointer-events: all; -element. (The opposite of pointerEventsNoneClass ).
• eventNamespace (String|null, default: pointer-events-polyfill ) — the namespace this plugin should use to identify events.

• 0.2.4 — correct namespaces for subscriptions
• 0.2.3 — better test, remove explicit support for pointer-events:auto
• 0.2.2 — add namespace to the subscribed events, add first basic tests
• 0.2.1 — documentation
• 0.2.0 — change css-detection to use recursive traversion, detecting pointer-events: none|all on parent-elements
• 0.1.0 — initial version

Credits, where credits are due. This Polyfill is loosely based on @kmeworth’s pointer_events_polyfill.

The reason for this package’s existance is that the pointer_events_polyfill is seemingly unmaintained and no longer adheres to common jQuery-Plugin best practices. Also, this package is available on Bower & NPM.

List of Contributors:

• @kmeworth
• @mhmxs
• @raldred
• Modernizr
• and probably some more awesome people

About

Tiny, maintained CSS pointer-events polyfill

Источник

pointer — events

Свойство pointer — events определяет, как HTML-элемент реагирует на различные события мыши, прикосновений или события из JavaScript.

Время чтения: меньше 5 мин

Обновлено 22 февраля 2023

Кратко

Скопировать ссылку «Кратко» Скопировано

Свойство pointer — events управляет тем, как элемент будет реагировать на указатель (pointer): наведение или клик курсора мыши, тап на сенсорном экране, соответствующие события из JavaScript.

Пример

Скопировать ссылку «Пример» Скопировано

Кнопка не будет реагировать на нажатие указателем:

 button  pointer-events: none;> button  pointer-events: none; >    Скопировать Скопировано Не удалось скопировать   

Но если на ней сфокусироваться с клавиатуры и нажать пробел, то она нажмётся.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

• none — запрещает элементу реагировать на указатель.
• auto — элемент реагирует на указатель (значение по умолчанию).

В примере ниже есть два абзаца текста с наложенным поверх них псевдоэлементом с градиентом. В первом случае если попытаться выделить текст с нижней строки, то ничего не получится. Псевдоэлемент не пропустит указатель ниже, перехватит его. Второму абзацу прописано pointer — events : none и поэтому псевдоэлемент становится невидимым для указателя, текст можно выделить и, например, скопировать.

Существует ещё 8 возможных значений для этого свойства, но они применимы только к SVG-элементам. Подробнее о них можно почитать в спецификации.

Источник