{"id":18170,"date":"2013-06-20T10:06:03","date_gmt":"2013-06-20T17:06:03","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=18170"},"modified":"2020-01-30T08:59:20","modified_gmt":"2020-01-30T15:59:20","slug":"pointer-events","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/p\/pointer-events\/","title":{"rendered":"pointer-events"},"content":{"rendered":"<p>The <code>pointer-events<\/code> property allows for control over how HTML elements respond to mouse\/touch events \u2013 including CSS hover\/active states, click\/tap events in Javascript, and whether or not the cursor is visible. <\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.avoid-clicks {\r\n  pointer-events: none;\r\n}<\/code><\/pre>\n<p>While the <code>pointer-events<\/code> property takes <i>eleven<\/i> possible values, all but three of them are reserved for use with SVG. The three valid values for any HTMl element are:<\/p>\n<ul>\n<li><code>none<\/code> prevents all click, state and cursor options on the specified HTML element<\/li>\n<li><code>auto<\/code> restores the default functionality (useful for use on child elements of an element with <code>pointer-events: none;<\/code> specified<\/li>\n<li><code>inherit<\/code> will use the <code>pointer-events<\/code> value of the element&#8217;s parent<\/li>\n<\/ul>\n<pre class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-type=\"result\" data-href=\"dseHt\" data-user=\"zakkain\" data-safe=\"true\"><code><\/code><a href=\"http:\/\/codepen.io\/zakkain\/pen\/dseHt\" rel=\"noopener\">Check out this Pen!<\/a><\/pre>\n<p>As demonstrated above, the prime use case for <code>pointer-events<\/code> is to allow click or tap behavior to \u201cpass through\u201d an element to another element below it on the Z axis. For example, this would be useful for graphic overlays, or hiding elements with <code>opacity<\/code> (eg. tooltips) and still allowing text-selection on the content below it.<\/p>\n<h3 id=\"points-of-interest\">Points of Interest<\/h3>\n<ul>\n<li>\u201cThe use of pointer-events in CSS for non-SVG elements is experimental. The feature used to be part of the CSS3 UI draft specification but, due to many open issues, has been postponed to CSS4.\u201d \u2014 Mozilla MDN<\/li>\n<li>\u201cIf you add a click event listener to an element, then remove the pointer-events style (or change its value to auto, the click event will fire the designated functionality. Basically, the click event respects the pointer-events value.\u201d \u2014 David Walsh<\/li>\n<\/ul>\n<h3 id=\"other-resources\">Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/caniuse.com\/pointer-events\" rel=\"noopener\">caniuse.com compatibility table<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/pointer-events\" rel=\"noopener\">Mozilla Docs<\/a><\/li>\n<li><a href=\"http:\/\/davidwalsh.name\/pointer-events\" rel=\"noopener\">David Walsh<\/a><\/li>\n<\/ul>\n<h3 id=\"browser-support\">Browser Support<\/h3>\n<div class=\"caniuse\"><div class=\"caniuse-header\"><p>This browser support data is from <a href=\"http:\/\/caniuse.com\/#feat=pointer-events\" rel=\"noopener\">Caniuse<\/a>, which has more detail. A number indicates that browser supports the feature at that version and up.<\/p><\/div><div class=\"caniuse-section\"><h4>Desktop<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"chrome\"><span>Chrome<\/span><\/th><th class=\"firefox\"><span>Firefox<\/span><\/th><th class=\"ie\"><span>IE<\/span><\/th><th class=\"edge\"><span>Edge<\/span><\/th><th class=\"safari\"><span>Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Chrome - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><td class=\"y yep\" title=\"Firefox - \"><span class=\"caniuse-agents-version version\">3.6<\/span><\/td><td class=\"y yep\" title=\"IE - \"><span class=\"caniuse-agents-version version\">11<\/span><\/td><td class=\"y yep\" title=\"Edge - \"><span class=\"caniuse-agents-version version\">12<\/span><\/td><td class=\"y yep\" title=\"Safari - \"><span class=\"caniuse-agents-version version\">4<\/span><\/td><\/tr><\/table><\/div><div class=\"caniuse-section\"><h4>Mobile \/ Tablet<\/h4><table class=\"browser-support-table\"><thead><tr><th class=\"and_chr\"><span>Android Chrome<\/span><\/th><th class=\"and_ff\"><span>Android Firefox<\/span><\/th><th class=\"android\"><span>Android<\/span><\/th><th class=\"ios_saf\"><span>iOS Safari<\/span><\/th><\/tr><\/thead><tbody><tr><td class=\"y yep\" title=\"Android Chrome - \"><span class=\"caniuse-agents-version version\">123<\/span><\/td><td class=\"y yep\" title=\"Android Firefox - \"><span class=\"caniuse-agents-version version\">124<\/span><\/td><td class=\"y yep\" title=\"Android - \"><span class=\"caniuse-agents-version version\">2.1<\/span><\/td><td class=\"y yep\" title=\"iOS Safari - \"><span class=\"caniuse-agents-version version\">3.2<\/span><\/td><\/tr><\/table><\/div><\/div>\n<p>The support is a bit deeper in some browsers when used on <code>&lt;svg&gt;<\/code>, for instance, IE 9 supports that.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The pointer-events property allows for control over how HTML elements respond to mouse\/touch events \u2013 including CSS hover\/active states, click\/tap events in Javascript, and whether or not the cursor is visible. .avoid-clicks { pointer-events: none; } While the pointer-events property takes eleven possible values, all but three of them are reserved for use with SVG. [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13941,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1253],"acf":[],"jetpack-related-posts":[{"id":280309,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/touch-action\/","url_meta":{"origin":18170,"position":0},"title":"touch-action","date":"January 2, 2019","format":false,"excerpt":"The touch-action property in CSS gives you control over the effect of touchscreen interactions with an element, similar to the more widely-used pointer-events property used to control mouse interactions. #element { touch-action: pan-right pinch-zoom; } The touch-action property is useful primarily for interactive UI elements that need slightly different behavior\u2026","rel":"","context":"In \"pointer-events\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14043,"url":"https:\/\/css-tricks.com\/almanac\/properties\/c\/cursor\/","url_meta":{"origin":18170,"position":1},"title":"cursor","date":"September 5, 2011","format":false,"excerpt":"The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it's only relevant in browsers\/operating systems in which there is a mouse and cursor. They are used essentially for UX to convey the\u2026","rel":"","context":"In \"cursor\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3327,"url":"https:\/\/css-tricks.com\/snippets\/css\/give-clickable-elements-a-pointer-cursor\/","url_meta":{"origin":18170,"position":2},"title":"Give Clickable Elements a Pointer Cursor","date":"August 10, 2009","format":false,"excerpt":"a[href], input[type='submit'], input[type='image'], label[for], select, button, .pointer { cursor: pointer; } Some elements that are clickable mysteriously don't trigger a pointer cursor in browsers. This fixes that, and provides a default class \"pointer\" for applying it to other clickable things as needed.","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":191496,"url":"https:\/\/css-tricks.com\/lodge\/svg\/37-svg-javascriptdom-events\/","url_meta":{"origin":18170,"position":3},"title":"37: SVG and JavaScript\/DOM Events","date":"December 23, 2014","format":false,"excerpt":"When you use inline , all the elements are in the DOM, just like s and s and any other HTML element. If you have SVG like: and you do: var rect = document.getElementById(\"foo\"); you'll get a reference to that . And not only that, you can attach event listeners\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":208296,"url":"https:\/\/css-tricks.com\/snippets\/css\/toggle-visibility-when-hiding-elements\/","url_meta":{"origin":18170,"position":4},"title":"Toggle Visibility When Hiding Elements","date":"September 17, 2015","format":false,"excerpt":"The development team at Medium have discussed some bad practices that break accessibility. In one example, they argue that opacity is not well supported by screen readers and so if we want to hide an element in a transition then we should always use the visibility attribute, too: .m-fadeOut {\u2026","rel":"","context":"In \"hiding\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":154816,"url":"https:\/\/css-tricks.com\/snippets\/css\/custom-file-input-styling-webkitblink\/","url_meta":{"origin":18170,"position":5},"title":"Custom File Input Styling","date":"October 31, 2013","format":false,"excerpt":"If you're interested in Webkit\/Blink\/Chrome specific styling, there is a proprietary pseudo element to hide, and then use an also non-standard psudeo-on-an-input: <input class=\"custom-file-input\" type=\"file\"> .custom-file-input::-webkit-file-upload-button { visibility: hidden; } .custom-file-input::before { content: 'Select some files'; display: inline-block; background: linear-gradient(top, #f9f9f9, #e3e3e3); border: 1px solid #999; border-radius: 3px; padding: 5px\u2026","rel":"","context":"In \"file input\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18170"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=18170"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18170\/revisions"}],"predecessor-version":[{"id":302962,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/18170\/revisions\/302962"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13941"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=18170"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=18170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}