Event Pointer: None, but click

Question

only click allowed and disable all other pointer events

top layer has a search bar

bottom layer has word cloud

I set pointer-events:none on the top layer, so all the words in the word cloud can hang, even if they are below the search bar.

but I want the click event on the input text to be enabled, so that when the user wants to enter something, he can.

Here is the related violin

The text is behind the input, but it must be hovering, the input is above the text, but it must be focused with the mouse so that the user can enter.

Note: this seems to be a place, but it is not. look at the source image to see what I'm trying to achieve.

Answer 1

Since pointer-events blocks interactive events (click, hover, mouseenter, etc.), it will be accessible only with javascript (for example, with focus).

This may not be the best solution, but I think in your case?

 (function($) { var focus = false; $(document).on('click', function(e) { console.log(focus); e.preventDefault(); if (focus) { focus = false; $('.cl1').trigger('blur'); } else { focus = true; $('.cl1').focus(); } }); })(jQuery); 

fiddle with this working solution: https://jsfiddle.net/cob02bpv/1/

Edit: you can check which item was clicked, only the items below it will be complex.

If this is not a solution, the only thing would be to calculate the coordinates from the input window and check where the click event was click . But still, you will have problems with your items in the input field.

Answer 2

I think this should work. Listening for the click event in the parent container, getting event.clientX and event.clientY values ​​to check if they are within the input element. If so, you can set focus on the input element. You can still determine whether one of the random words was clicked under the input element.

 var d = document, c = d.getElementsByClassName('container').item(0), inp = d.createElement('input'), a = 50, i = 0; /* | get the clientBoundingRect of the input element | and if the mouse x and mouse y positions are within | the bounds set the focus on to the input element. ------------------------------------------------------------- */ function inpClickHndl (evt) { var inpRect = inp.getBoundingClientRect(), x = evt.clientX, y = evt.clientY, l = inpRect.left, w = l + inpRect.width, t = inpRect.top, h = t + inpRect.height; if (x >= l && x <= w && y >= t && y <= h) { inp.focus(); } } /* | ignore this, it just to create the random words. ------------------------------------------------------------- */ function wordClickHndl (evt) { this.style.color = "yellow"; } for (i; i < a; i++) { var p = d.createElement('p'), t = d.createTextNode('Random Word'); p.appendChild(t); p.addEventListener('click', wordClickHndl, false); p.style.position = 'absolute'; p.style.top = Math.floor(Math.random() * (window.innerHeight - 80)) + -40 + 'px'; p.style.left = Math.floor(Math.random() * (window.innerWidth - 80)) + -40 + 'px'; p.style.fontSize = Math.floor(Math.random() * (38 - 8)) + 8 + 'px'; p.style.fontWeight = 'bold'; c.appendChild(p); } inp.setAttribute('type', 'text'); c.appendChild(inp); /*------------------------------------------------------------- */ // add a click handler to your parent element. c.addEventListener('click', inpClickHndl, false); 

 body { margin: 0; font-family: sans-serif; } .container { position: relative; height: 100vh; width: 100vw; background-color: #1a1a1a; } .container p { color: green; } .container p:hover { color: red; cursor: pointer; } .container input { position: absolute; top: 50%; left: calc(50% - 85px); pointer-events:none; opacity: .75; } 

 <div class="container"></div> 

Answer 3

Just add the CSS3 pointer-events property, specifying initial as the text box. It is also recommended that you use !important , since another property may pass the added property.

In CSS3:

 pointer-events:initial !important 

In JavaScript:

document.querySelector('input[type=text]').style.pointerEvents="initial"

Answer 4

If the layout allows this, you can use the neighboring sibling combinator, given that you reordered the elements:

Tested on FireFox and Chrome.

 .backText:hover { color : red; } .cl1 { opacity : 0.7; position : absolute; } /* adjacent sibling combinator */ .wrap-input:hover + div { color : red; } .cl1:focus { opacity : 1; } 

 <div> <div class="wrap-input"> <input type="text" class="cl1" value="aa" /> </div> <div class="backText"> Some text to be hovered even if input is above </div> </div> 

---

Other options

The following only works on Firefox. Tested on Chrome, and it blinks when the pointer moves, but it may give some ideas.

Instead of setting pointer-events directly to the input element, install it using the :hover pseudo- :hover .

An example based on your violin:

 .cl1 { position : absolute; top : 0px; opacity : 0.7; height : 30px; } /* Move pointer-events here */ .cl1:hover { pointer-events : none; } .cl1:focus { opacity : 1; } .backText:hover { color : red; } 

 <div> <div class="backText"> Some text to be hovered even if input is above </div> <div> <input type="text" class="cl1" /> </div> </div>